Kanban column virtualization

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

@@ -11,6 +11,7 @@ type Props = {
   classNames?: string;
   placeholderChildren?: ReactNode;
   defaultValue?: boolean;
+  useIdletime?: boolean;
 };
 
 const RenderIfVisible: React.FC<Props> = (props) => {
@@ -21,9 +22,10 @@ const RenderIfVisible: React.FC<Props> = (props) => {
     horizontalOffset = 0,
     as = "div",
     children,
-    defaultValue = false,
     classNames = "",
     placeholderChildren = null, //placeholder children
+    defaultValue = false,
+    useIdletime = false,
   } = props;
   const [shouldVisible, setShouldVisible] = useState<boolean>(defaultValue);
   const placeholderHeight = useRef<string>(defaultHeight);
@@ -37,14 +39,13 @@ const RenderIfVisible: React.FC<Props> = (props) => {
       const observer = new IntersectionObserver(
         (entries) => {
           //DO no remove comments for future
-          // if (typeof window !== undefined && window.requestIdleCallback) {
-          //   window.requestIdleCallback(() => setShouldVisible(entries[0].isIntersecting), {
-          //     timeout: 300,
-          //   });
-          // } else {
-          //   setShouldVisible(entries[0].isIntersecting);
-          // }
-          setShouldVisible(entries[entries.length - 1].isIntersecting);
+          if (typeof window !== undefined && window.requestIdleCallback && useIdletime) {
+            window.requestIdleCallback(() => setShouldVisible(entries[entries.length - 1].isIntersecting), {
+              timeout: 300,
+            });
+          } else {
+            setShouldVisible(entries[entries.length - 1].isIntersecting);
+          }
         },
         {
           root: root?.current,
@@ -69,8 +70,10 @@ const RenderIfVisible: React.FC<Props> = (props) => {
   }, [isVisible, intersectionRef]);
 
   const child = isVisible ? <>{children}</> : placeholderChildren;
-  const style = isVisible ? {} : { height: placeholderHeight.current, width: "100%" };
-  const className = isVisible ? classNames : cn(classNames, "bg-custom-background-80");
+  const style: { width?: string; height?: string } = isVisible
+    ? {}
+    : { 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

@@ -1,4 +1,5 @@
 import { MutableRefObject } from "react";
+import clone from "lodash/clone";
 import { observer } from "mobx-react";
 import {
   GroupByColumnTypes,
@@ -13,13 +14,16 @@ import {
   TIssueOrderByOptions,
 } from "@plane/types";
 // constants
+// 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, getApproximateKanbanCardHeight } from "../utils";
 // components
 import { HeaderGroupByCard } from "./headers/group-by-card";
 import { KanbanGroup } from "./kanban-group";
@@ -132,6 +136,8 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
   };
 
   const isGroupByCreatedBy = group_by === "created_by";
+  const appxCardHeight = getApproximateKanbanCardHeight(displayProperties);
+  const isSubGroup = !!sub_group_id && sub_group_id !== "null";
 
   return (
     <div className={`relative w-full flex gap-2 px-2 ${sub_group_by ? "h-full" : "h-full"}`}>
@@ -139,6 +145,11 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
         list.length > 0 &&
         list.map((subList: IGroupByColumn) => {
           const groupByVisibilityToggle = visibilityGroupBy(subList);
+          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 * appxCardHeight;
 
           if (groupByVisibilityToggle.showGroup === false) return <></>;
           return (
@@ -167,28 +178,44 @@ 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={appxCardHeight}
+                      cardsInColumn={issueLength !== undefined && issueLength < 3 ? issueLength : 3}
+                    />
+                  }
+                  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>
           );
@@ -196,3 +223,4 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
     </div>
   );
 });
+

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

@@ -619,3 +619,49 @@ export const isIssueNew = (issue: TIssue) => {
   const diff = currentDate.getTime() - createdDate.getTime();
   return diff < 30000;
 };
+
+/**
+ * Get approximate height of card based on display Properties
+ * @param displayProperties 
+ * @returns 
+ */
+export function getApproximateKanbanCardHeight(displayProperties: IIssueDisplayProperties | undefined) {
+  if (!displayProperties) return 100;
+
+  let defaultCardHeight = 46;
+
+  const clonedProperties = clone(displayProperties);
+
+  if (clonedProperties.key) {
+    defaultCardHeight += 24;
+  }
+
+  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;
+
+  (Object.keys(clonedProperties) as (keyof IIssueDisplayProperties)[]).forEach((key: keyof IIssueDisplayProperties) => {
+    if (clonedProperties[key]) {
+      propertyCount++;
+    }
+  });
+
+  if (propertyCount > 3) {
+    defaultCardHeight += 60;
+  } else if (propertyCount > 0) {
+    defaultCardHeight += 32;
+  }
+
+  return defaultCardHeight;
+}

web/core/components/ui/loader/layouts/kanban-layout-loader.tsx

@@ -1,25 +1,45 @@
 import { forwardRef } from "react";
 
-export const KanbanIssueBlockLoader = forwardRef<HTMLSpanElement>((props, ref) => (
-  <span ref={ref} className="block h-28 m-1.5 animate-pulse bg-custom-background-80 rounded" />
-));
+export const KanbanIssueBlockLoader = forwardRef<HTMLSpanElement, { cardHeight?: number }>(
+  ({ cardHeight = 100 }, ref) => (
+    <span
+      ref={ref}
+      className={`block m-1.5 animate-pulse bg-custom-background-80 rounded`}
+      style={{ height: `${cardHeight}px` }}
+    />
+  )
+);
+
+export const KanbanColumnLoader = ({
+  cardsInColumn = 3,
+  ignoreHeader = false,
+  cardHeight = 100,
+}: {
+  cardsInColumn?: number;
+  ignoreHeader?: boolean;
+  cardHeight?: number;
+}) => (
+  <div className="flex flex-col gap-3">
+    {!ignoreHeader && (
+      <div className="flex items-center justify-between h-9 w-80">
+        <div className="flex item-center gap-3 px-1.5">
+          <span className="h-6 w-6 bg-custom-background-80 rounded animate-pulse" />
+          <span className="h-6 w-24 bg-custom-background-80 rounded animate-pulse" />
+        </div>
+      </div>
+    )}
+    {Array.from({ length: cardsInColumn }, (_, cardIndex) => (
+      <KanbanIssueBlockLoader key={cardIndex} cardHeight={cardHeight} />
+    ))}
+  </div>
+);
 
 KanbanIssueBlockLoader.displayName = "KanbanIssueBlockLoader";
 
 export const KanbanLayoutLoader = ({ cardsInEachColumn = [2, 3, 2, 4, 3] }: { cardsInEachColumn?: number[] }) => (
   <div className="flex gap-5 px-3.5 py-1.5 overflow-x-auto">
     {cardsInEachColumn.map((cardsInColumn, columnIndex) => (
-      <div key={columnIndex} className="flex flex-col gap-3">
-        <div className="flex items-center justify-between h-9 w-80">
-          <div className="flex item-center gap-3 px-1.5">
-            <span className="h-6 w-6 bg-custom-background-80 rounded animate-pulse" />
-            <span className="h-6 w-24 bg-custom-background-80 rounded animate-pulse" />
-          </div>
-        </div>
-        {Array.from({ length: cardsInColumn }, (_, cardIndex) => (
-          <KanbanIssueBlockLoader key={cardIndex} />
-        ))}
-      </div>
+      <KanbanColumnLoader key={columnIndex} cardsInColumn={cardsInColumn} />
     ))}
   </div>
 );