Virtualization like changes for list

web/components/issues/issue-layouts/list/base-list-root.tsx

@@ -119,25 +119,23 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
   );
 
   return (
-    <>
-      <div className={`relative h-full w-full bg-custom-background-90`}>
-        <List
-          issuesMap={issueMap}
-          displayProperties={displayProperties}
-          group_by={group_by}
-          handleIssues={handleIssues}
-          quickActions={renderQuickActions}
-          issueIds={issueIds}
-          showEmptyGroup={showEmptyGroup}
-          viewId={viewId}
-          quickAddCallback={issues?.quickAddIssue}
-          enableIssueQuickAdd={!!enableQuickAdd}
-          canEditProperties={canEditProperties}
-          disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
-          storeType={storeType}
-          addIssuesToView={addIssuesToView}
-        />
-      </div>
-    </>
+    <div className={`relative h-full w-full bg-custom-background-90`}>
+      <List
+        issuesMap={issueMap}
+        displayProperties={displayProperties}
+        group_by={group_by}
+        handleIssues={handleIssues}
+        quickActions={renderQuickActions}
+        issueIds={issueIds}
+        showEmptyGroup={showEmptyGroup}
+        viewId={viewId}
+        quickAddCallback={issues?.quickAddIssue}
+        enableIssueQuickAdd={!!enableQuickAdd}
+        canEditProperties={canEditProperties}
+        disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
+        storeType={storeType}
+        addIssuesToView={addIssuesToView}
+      />
+    </div>
   );
 });

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

@@ -48,56 +48,50 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
   const projectDetails = getProjectById(issue.project_id);
 
   return (
-    <>
-      <div
-        className={cn(
-          "relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm border border-transparent border-b-custom-border-200 last:border-b-transparent",
-          {
-            "border border-custom-primary-70 hover:border-custom-primary-70":
-              peekIssue && peekIssue.issueId === issue.id,
-          }
-        )}
+    <div
+      className={cn("relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm", {
+        "border border-custom-primary-70 hover:border-custom-primary-70": peekIssue && peekIssue.issueId === issue.id,
+      })}
+    >
+      {displayProperties && displayProperties?.key && (
+        <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
+          {projectDetails?.identifier}-{issue.sequence_id}
+        </div>
+      )}
+
+      {issue?.tempId !== undefined && (
+        <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
+      )}
+
+      <ControlLink
+        href={`/${workspaceSlug}/projects/${projectId}/issues/${issueId}`}
+        target="_blank"
+        onClick={() => handleIssuePeekOverview(issue)}
+        className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
       >
-        {displayProperties && displayProperties?.key && (
-          <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
-            {projectDetails?.identifier}-{issue.sequence_id}
+        <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+          <span>{issue.name}</span>
+        </Tooltip>
+      </ControlLink>
+
+      <div className="ml-auto flex flex-shrink-0 items-center gap-2">
+        {!issue?.tempId ? (
+          <>
+            <IssueProperties
+              className="relative flex items-center gap-2 whitespace-nowrap"
+              issue={issue}
+              isReadOnly={!canEditIssueProperties}
+              handleIssues={updateIssue}
+              displayProperties={displayProperties}
+            />
+            {quickActions(issue)}
+          </>
+        ) : (
+          <div className="h-4 w-4">
+            <Spinner className="h-4 w-4" />
           </div>
         )}
-
-        {issue?.tempId !== undefined && (
-          <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
-        )}
-
-        <ControlLink
-          href={`/${workspaceSlug}/projects/${projectId}/issues/${issueId}`}
-          target="_blank"
-          onClick={() => handleIssuePeekOverview(issue)}
-          className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
-        >
-          <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-            <span>{issue.name}</span>
-          </Tooltip>
-        </ControlLink>
-
-        <div className="ml-auto flex flex-shrink-0 items-center gap-2">
-          {!issue?.tempId ? (
-            <>
-              <IssueProperties
-                className="relative flex items-center gap-2 whitespace-nowrap"
-                issue={issue}
-                isReadOnly={!canEditIssueProperties}
-                handleIssues={updateIssue}
-                displayProperties={displayProperties}
-              />
-              {quickActions(issue)}
-            </>
-          ) : (
-            <div className="h-4 w-4">
-              <Spinner className="h-4 w-4" />
-            </div>
-          )}
-        </div>
       </div>
-    </>
+    </div>
   );
 });

web/components/issues/issue-layouts/list/default.tsx

@@ -1,5 +1,5 @@
 // components
-import { IssueBlocksList, ListQuickAddIssueForm } from "components/issues";
+import { IssueBlock, IssueBlocksList, ListQuickAddIssueForm } from "components/issues";
 // hooks
 import { useLabel, useMember, useProject, useProjectState } from "hooks/store";
 // types
@@ -10,12 +10,15 @@ import {
   IIssueDisplayProperties,
   TIssueMap,
   TUnGroupedIssues,
+  IIssueListRow,
 } from "@plane/types";
 import { EIssueActions } from "../types";
 // constants
 import { HeaderGroupByCard } from "./headers/group-by-card";
-import { getGroupByColumns } from "../utils";
-import { TCreateModalStoreTypes } from "constants/issue";
+import { getGroupByColumns, getIssueFlatList } from "../utils";
+import { EIssueListRow, TCreateModalStoreTypes } from "constants/issue";
+import { useRef } from "react";
+import RenderIfVisible from "components/core/render-if-visible-HOC";
 
 export interface IGroupByList {
   issueIds: TGroupedIssues | TUnGroupedIssues | any;
@@ -62,9 +65,11 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
   const label = useLabel();
   const projectState = useProjectState();
 
-  const list = getGroupByColumns(group_by as GroupByColumnTypes, project, label, projectState, member, true);
+  const containerRef = useRef<HTMLDivElement | null>(null);
 
-  if (!list) return null;
+  const groups = getGroupByColumns(group_by as GroupByColumnTypes, project, label, projectState, member, true);
+
+  if (!groups) return null;
 
   const prePopulateQuickAddData = (groupByKey: string | null, value: any) => {
     const defaultState = projectState.projectStates?.find((state) => state.default);
@@ -91,59 +96,82 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
     return preloadedData;
   };
 
-  const validateEmptyIssueGroups = (issues: TIssue[]) => {
-    const issuesCount = issues?.length || 0;
-    if (!showEmptyGroup && issuesCount <= 0) return false;
-    return true;
-  };
+  const list = getIssueFlatList(groups, issueIds, !!showEmptyGroup);
+
+  console.log(groups, issueIds, list);
 
   const is_list = group_by === null ? true : false;
 
   const isGroupByCreatedBy = group_by === "created_by";
 
   return (
-    <div className="relative h-full w-full">
+    <div ref={containerRef} className="relative overflow-auto h-full w-full">
       {list &&
         list.length > 0 &&
-        list.map(
-          (_list: any) =>
-            validateEmptyIssueGroups(is_list ? issueIds : issueIds?.[_list.id]) && (
-              <div key={_list.id} className={`flex flex-shrink-0 flex-col`}>
-                <div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-3 py-1">
+        list.map((listRow: IIssueListRow) => {
+          switch (listRow.type) {
+            case EIssueListRow.HEADER:
+              return (
+                <div
+                  key={listRow.id}
+                  className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-3 py-1"
+                >
                   <HeaderGroupByCard
-                    icon={_list.icon}
-                    title={_list.name || ""}
-                    count={is_list ? issueIds?.length || 0 : issueIds?.[_list.id]?.length || 0}
-                    issuePayload={_list.payload}
+                    icon={listRow.icon}
+                    title={listRow?.name || ""}
+                    count={is_list ? issueIds?.length || 0 : issueIds?.[listRow.id]?.length || 0}
+                    issuePayload={listRow.payload || {}}
                     disableIssueCreation={disableIssueCreation || isGroupByCreatedBy}
                     storeType={storeType}
                     addIssuesToView={addIssuesToView}
                   />
                 </div>
-
-                {issueIds && (
-                  <IssueBlocksList
-                    issueIds={is_list ? issueIds || 0 : issueIds?.[_list.id] || 0}
-                    issuesMap={issuesMap}
-                    handleIssues={handleIssues}
-                    quickActions={quickActions}
-                    displayProperties={displayProperties}
-                    canEditProperties={canEditProperties}
-                  />
-                )}
-
-                {enableIssueQuickAdd && !disableIssueCreation && !isGroupByCreatedBy && (
-                  <div className="sticky bottom-0 z-[1] w-full flex-shrink-0">
+              );
+            case EIssueListRow.QUICK_ADD:
+              if (enableIssueQuickAdd && !disableIssueCreation && !isGroupByCreatedBy)
+                return (
+                  <div
+                    key={`${listRow.id}_${EIssueListRow.QUICK_ADD}`}
+                    className="sticky bottom-0 z-[1] w-full flex-shrink-0"
+                  >
                     <ListQuickAddIssueForm
-                      prePopulatedData={prePopulateQuickAddData(group_by, _list.id)}
+                      prePopulatedData={prePopulateQuickAddData(group_by, listRow.id)}
                       quickAddCallback={quickAddCallback}
                       viewId={viewId}
                     />
                   </div>
-                )}
-              </div>
-            )
-        )}
+                );
+              else return null;
+            case EIssueListRow.NO_ISSUES:
+              const noIssuesRow = listRow as IIssueListRow;
+              return (
+                <div
+                  key={`${noIssuesRow.id}_${EIssueListRow.NO_ISSUES}`}
+                  className="bg-custom-background-100 p-3 text-sm text-custom-text-400"
+                >
+                  No issues
+                </div>
+              );
+            case EIssueListRow.ISSUE:
+              return (
+                <RenderIfVisible
+                  key={`${listRow.id}_${listRow.groupId}`}
+                  defaultHeight={45}
+                  root={containerRef}
+                  classNames={"relative border border-transparent border-b-custom-border-200 last:border-b-transparent"}
+                >
+                  <IssueBlock
+                    issueId={listRow.id}
+                    issuesMap={issuesMap}
+                    handleIssues={handleIssues}
+                    quickActions={quickActions}
+                    canEditProperties={canEditProperties}
+                    displayProperties={displayProperties}
+                  />
+                </RenderIfVisible>
+              );
+          }
+        })}
     </div>
   );
 };
@@ -209,3 +237,5 @@ export const List: React.FC<IList> = (props) => {
     </div>
   );
 };
+
+