change kanban group virtualization logic (#5664)

web/core/components/core/render-if-visible-HOC.tsx

@@ -75,7 +75,7 @@ const RenderIfVisible: React.FC<Props> = (props) => {
   }, [isVisible, intersectionRef, shouldRecordHeights]);
 
   const child = isVisible ? <>{children}</> : placeholderChildren;
-  const style = isVisible || placeholderChildren ? {} : { height: placeholderHeight.current, width: "100%" };
+  const style = isVisible || !shouldRecordHeights ? {} : { height: placeholderHeight.current, width: "100%" };
   const className = isVisible || placeholderChildren ? classNames : cn(classNames, "bg-custom-background-80");
 
   return React.createElement(as, { ref: intersectionRef, style, className }, child);

web/core/components/issues/issue-layouts/kanban/default.tsx

@@ -183,7 +183,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
 
               {groupByVisibilityToggle.showIssues && (
                 <RenderIfVisible
-                  verticalOffset={0}
+                  verticalOffset={100}
                   horizontalOffset={100}
                   root={scrollableContainerRef}
                   classNames="relative h-full"

web/core/components/issues/issue-layouts/list/block-root.tsx

@@ -23,7 +23,6 @@ import { HIGHLIGHT_CLASS, getIssueBlockId, isIssueNew } from "../utils";
 import { TRenderQuickActions } from "./list-view-types";
 
 type Props = {
-  issueIds: string[];
   issueId: string;
   issuesMap: TIssueMap;
   updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
@@ -44,7 +43,6 @@ type Props = {
 
 export const IssueBlockRoot: FC<Props> = observer((props) => {
   const {
-    issueIds,
     issueId,
     issuesMap,
     groupId,
@@ -161,7 +159,6 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
         subIssues?.map((subIssueId) => (
           <IssueBlockRoot
             key={`${subIssueId}`}
-            issueIds={issueIds}
             issueId={subIssueId}
             issuesMap={issuesMap}
             updateIssue={updateIssue}

web/core/components/issues/issue-layouts/list/blocks-list.tsx

@@ -43,7 +43,6 @@ export const IssueBlocksList: FC<Props> = (props) => {
         issueIds.map((issueId: string, index: number) => (
           <IssueBlockRoot
             key={issueId}
-            issueIds={issueIds}
             issueId={issueId}
             issuesMap={issuesMap}
             updateIssue={updateIssue}

web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx

@@ -39,7 +39,6 @@ interface Props {
   issueId: string;
   isScrolled: MutableRefObject<boolean>;
   containerRef: MutableRefObject<HTMLTableElement | null>;
-  issueIds: string[];
   spreadsheetColumnsList: (keyof IIssueDisplayProperties)[];
   spacingLeft?: number;
   selectionHelpers: TSelectionHelper;
@@ -57,7 +56,6 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
     canEditProperties,
     isScrolled,
     containerRef,
-    issueIds,
     spreadsheetColumnsList,
     spacingLeft = 6,
     selectionHelpers,
@@ -124,7 +122,6 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
             portalElement={portalElement}
             isScrolled={isScrolled}
             containerRef={containerRef}
-            issueIds={issueIds}
             spreadsheetColumnsList={spreadsheetColumnsList}
             selectionHelpers={selectionHelpers}
           />

web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx

@@ -125,7 +125,6 @@ export const SpreadsheetTable = observer((props: Props) => {
             portalElement={portalElement}
             containerRef={containerRef}
             isScrolled={isScrolled}
-            issueIds={issueIds}
             spreadsheetColumnsList={spreadsheetColumnsList}
             selectionHelpers={selectionHelpers}
           />