[WEB-2316] chore: Kanban group virtualization (#5565)

* kanban group virtualization

* minor name change

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

@@ -13,14 +13,17 @@ import {
   TIssueOrderByOptions,
 } from "@plane/types";
 // constants
-// hooks
 import { ContentWrapper } from "@plane/ui";
+// components
+import RenderIfVisible from "@/components/core/render-if-visible-HOC";
+import { KanbanColumnLoader } from "@/components/ui";
+// hooks
 import { useCycle, useKanbanView, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 // types
 // parent components
 import { TRenderQuickActions } from "../list/list-view-types";
-import { getGroupByColumns, isWorkspaceLevel, GroupDropLocation } from "../utils";
+import { getGroupByColumns, isWorkspaceLevel, GroupDropLocation, getApproximateCardHeight } from "../utils";
 // components
 import { HeaderGroupByCard } from "./headers/group-by-card";
 import { KanbanGroup } from "./kanban-group";
@@ -53,6 +56,7 @@ export interface IKanBan {
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
   handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
   showEmptyGroup?: boolean;
+  subGroupIndex?: number;
 }
 
 export const KanBan: React.FC<IKanBan> = observer((props) => {
@@ -80,6 +84,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
     orderBy,
     isDropDisabled,
     dropErrorMessage,
+    subGroupIndex = 0,
   } = props;
 
   const storeType = useIssueStoreType();
@@ -133,15 +138,24 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
   };
 
   const isGroupByCreatedBy = group_by === "created_by";
+  const approximateCardHeight = getApproximateCardHeight(displayProperties);
+  const isSubGroup = !!sub_group_id && sub_group_id !== "null";
 
   return (
     <ContentWrapper className={`flex-row relative gap-4 py-4`}>
       {list &&
         list.length > 0 &&
-        list.map((subList: IGroupByColumn) => {
+        list.map((subList: IGroupByColumn, groupIndex) => {
           const groupByVisibilityToggle = visibilityGroupBy(subList);
 
           if (groupByVisibilityToggle.showGroup === false) return <></>;
+
+          const issueIds = isSubGroup
+            ? ((groupedIssueIds as TSubGroupedIssues)?.[subList.id]?.[sub_group_id] ?? [])
+            : ((groupedIssueIds as TGroupedIssues)?.[subList.id] ?? []);
+          const issueLength = issueIds?.length as number;
+          const groupHeight = issueLength * approximateCardHeight;
+
           return (
             <div
               key={subList.id}
@@ -168,28 +182,45 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
               )}
 
               {groupByVisibilityToggle.showIssues && (
-                <KanbanGroup
-                  groupId={subList.id}
-                  issuesMap={issuesMap}
-                  groupedIssueIds={groupedIssueIds}
-                  displayProperties={displayProperties}
-                  sub_group_by={sub_group_by}
-                  group_by={group_by}
-                  orderBy={orderBy}
-                  sub_group_id={sub_group_id}
-                  isDragDisabled={isDragDisabled}
-                  isDropDisabled={!!subList.isDropDisabled || !!isDropDisabled}
-                  dropErrorMessage={subList.dropErrorMessage ?? dropErrorMessage}
-                  updateIssue={updateIssue}
-                  quickActions={quickActions}
-                  enableQuickIssueCreate={enableQuickIssueCreate}
-                  quickAddCallback={quickAddCallback}
-                  disableIssueCreation={disableIssueCreation}
-                  canEditProperties={canEditProperties}
-                  scrollableContainerRef={scrollableContainerRef}
-                  loadMoreIssues={loadMoreIssues}
-                  handleOnDrop={handleOnDrop}
-                />
+                <RenderIfVisible
+                  verticalOffset={0}
+                  horizontalOffset={100}
+                  root={scrollableContainerRef}
+                  classNames="relative h-full"
+                  defaultHeight={`${groupHeight}px`}
+                  placeholderChildren={
+                    <KanbanColumnLoader
+                      ignoreHeader
+                      cardHeight={approximateCardHeight}
+                      cardsInColumn={issueLength !== undefined && issueLength < 3 ? issueLength : 3}
+                    />
+                  }
+                  defaultValue={groupIndex < 5 && subGroupIndex < 2}
+                  useIdletime
+                >
+                  <KanbanGroup
+                    groupId={subList.id}
+                    issuesMap={issuesMap}
+                    groupedIssueIds={groupedIssueIds}
+                    displayProperties={displayProperties}
+                    sub_group_by={sub_group_by}
+                    group_by={group_by}
+                    orderBy={orderBy}
+                    sub_group_id={sub_group_id}
+                    isDragDisabled={isDragDisabled}
+                    isDropDisabled={!!subList.isDropDisabled || !!isDropDisabled}
+                    dropErrorMessage={subList.dropErrorMessage ?? dropErrorMessage}
+                    updateIssue={updateIssue}
+                    quickActions={quickActions}
+                    enableQuickIssueCreate={enableQuickIssueCreate}
+                    quickAddCallback={quickAddCallback}
+                    disableIssueCreation={disableIssueCreation}
+                    canEditProperties={canEditProperties}
+                    scrollableContainerRef={scrollableContainerRef}
+                    loadMoreIssues={loadMoreIssues}
+                    handleOnDrop={handleOnDrop}
+                  />
+                </RenderIfVisible>
               )}
             </div>
           );

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

@@ -155,7 +155,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
     <div className="relative h-max min-h-full w-full">
       {list &&
         list.length > 0 &&
-        list.map((_list: IGroupByColumn) => {
+        list.map((_list: IGroupByColumn, subGroupIndex) => {
           const issueCount = getGroupIssueCount(undefined, _list.id, true) ?? 0;
           const subGroupByVisibilityToggle = visibilitySubGroupBy(_list, issueCount);
           if (subGroupByVisibilityToggle.showGroup === false) return <></>;
@@ -184,6 +184,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
                     sub_group_by={sub_group_by}
                     group_by={group_by}
                     sub_group_id={_list.id}
+                    subGroupIndex={subGroupIndex}
                     updateIssue={updateIssue}
                     quickActions={quickActions}
                     kanbanFilters={kanbanFilters}

web/core/components/issues/issue-layouts/utils.tsx

@@ -619,3 +619,54 @@ export const isIssueNew = (issue: TIssue) => {
   const diff = currentDate.getTime() - createdDate.getTime();
   return diff < 30000;
 };
+
+/**
+ * Returns approximate height of Kanban card based on display properties
+ * @param displayProperties
+ * @returns
+ */
+export function getApproximateCardHeight(displayProperties: IIssueDisplayProperties | undefined) {
+  if (!displayProperties) return 100;
+
+  // default card height
+  let cardHeight = 46;
+
+  const clonedProperties = clone(displayProperties);
+
+  // key adds the height for key
+  if (clonedProperties.key) {
+    cardHeight += 24;
+  }
+
+  // Ignore smaller dimension properties
+  const ignoredProperties: (keyof IIssueDisplayProperties)[] = [
+    "key",
+    "sub_issue_count",
+    "link",
+    "attachment_count",
+    "created_on",
+    "updated_on",
+  ];
+
+  ignoredProperties.forEach((key: keyof IIssueDisplayProperties) => {
+    delete clonedProperties[key];
+  });
+
+  let propertyCount = 0;
+
+  // count the remaining properties
+  (Object.keys(clonedProperties) as (keyof IIssueDisplayProperties)[]).forEach((key: keyof IIssueDisplayProperties) => {
+    if (clonedProperties[key]) {
+      propertyCount++;
+    }
+  });
+
+  // based on property count, approximate the height of each card
+  if (propertyCount > 3) {
+    cardHeight += 60;
+  } else if (propertyCount > 0) {
+    cardHeight += 32;
+  }
+
+  return cardHeight;
+}