From ff14d037c674afa651c0510682c4de71dcb5c5ca Mon Sep 17 00:00:00 2001
From: rahulramesha <rahulramesham@gmail.com>
Date: Thu, 1 Feb 2024 18:49:58 +0530
Subject: [PATCH] Virtualization like changes for spreadsheet

---
 .../issue-layouts/spreadsheet/issue-row.tsx   | 159 +++++++++---------
 .../spreadsheet/spreadsheet-table.tsx         |  28 +--
 .../spreadsheet/spreadsheet-view.tsx          |   1 +
 3 files changed, 96 insertions(+), 92 deletions(-)

diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
index 579b8863c..f79c838d1 100644
--- a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -97,93 +97,90 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
 
   return (
     <>
-      <tr
-        className={cn({
-          "border border-custom-primary-70 hover:border-custom-primary-70": peekIssue?.issueId === issueDetail.id,
-        })}
+      {/* first column/ issue name and key column */}
+      <td
+        className={cn(
+          "sticky group left-0 h-11  w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute border-r-[0.5px] border-custom-border-200",
+          {
+            "border-b-[0.5px]": peekIssue?.issueId !== issueDetail.id,
+          },
+          {
+            "border border-custom-primary-70 hover:border-custom-primary-70": peekIssue?.issueId === issueDetail.id,
+          }
+        )}
       >
-        {/* first column/ issue name and key column */}
-        <td
-          className={cn(
-            "sticky group left-0 h-11  w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute border-r-[0.5px] border-custom-border-200",
-            {
-              "border-b-[0.5px]": peekIssue?.issueId !== issueDetail.id,
-            }
-          )}
-        >
-          <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">
-            <div
-              className="flex min-w-min items-center gap-1.5 px-4 py-2.5 pr-0"
-              style={issueDetail.parent_id && nestingLevel !== 0 ? { paddingLeft } : {}}
-            >
-              <div className="relative flex cursor-pointer items-center text-center text-xs hover:text-custom-text-100">
-                <span
-                  className={`flex items-center justify-center font-medium  group-hover:opacity-0 ${
-                    isMenuActive ? "opacity-0" : "opacity-100"
-                  }`}
-                >
-                  {getProjectById(issueDetail.project_id)?.identifier}-{issueDetail.sequence_id}
-                </span>
+        <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">
+          <div
+            className="flex min-w-min items-center gap-1.5 px-4 py-2.5 pr-0"
+            style={issueDetail.parent_id && nestingLevel !== 0 ? { paddingLeft } : {}}
+          >
+            <div className="relative flex cursor-pointer items-center text-center text-xs hover:text-custom-text-100">
+              <span
+                className={`flex items-center justify-center font-medium  group-hover:opacity-0 ${
+                  isMenuActive ? "opacity-0" : "opacity-100"
+                }`}
+              >
+                {getProjectById(issueDetail.project_id)?.identifier}-{issueDetail.sequence_id}
+              </span>
 
-                {canEditProperties(issueDetail.project_id) && (
-                  <div className={`absolute left-2.5 top-0 hidden group-hover:block ${isMenuActive ? "!block" : ""}`}>
-                    {quickActions(issueDetail, customActionButton, portalElement.current)}
-                  </div>
-                )}
-              </div>
-
-              {issueDetail.sub_issues_count > 0 && (
-                <div className="flex h-6 w-6 items-center justify-center">
-                  <button
-                    className="h-5 w-5 cursor-pointer rounded-sm hover:bg-custom-background-90 hover:text-custom-text-100"
-                    onClick={() => handleToggleExpand()}
-                  >
-                    <ChevronRight className={`h-3.5 w-3.5 ${isExpanded ? "rotate-90" : ""}`} />
-                  </button>
+              {canEditProperties(issueDetail.project_id) && (
+                <div className={`absolute left-2.5 top-0 hidden group-hover:block ${isMenuActive ? "!block" : ""}`}>
+                  {quickActions(issueDetail, customActionButton, portalElement.current)}
                 </div>
               )}
             </div>
-          </WithDisplayPropertiesHOC>
-          <ControlLink
-            href={`/${workspaceSlug}/projects/${issueDetail.project_id}/issues/${issueId}`}
-            target="_blank"
-            onClick={() => handleIssuePeekOverview(issueDetail)}
-            className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+
+            {issueDetail.sub_issues_count > 0 && (
+              <div className="flex h-6 w-6 items-center justify-center">
+                <button
+                  className="h-5 w-5 cursor-pointer rounded-sm hover:bg-custom-background-90 hover:text-custom-text-100"
+                  onClick={() => handleToggleExpand()}
+                >
+                  <ChevronRight className={`h-3.5 w-3.5 ${isExpanded ? "rotate-90" : ""}`} />
+                </button>
+              </div>
+            )}
+          </div>
+        </WithDisplayPropertiesHOC>
+        <ControlLink
+          href={`/${workspaceSlug}/projects/${issueDetail.project_id}/issues/${issueId}`}
+          target="_blank"
+          onClick={() => handleIssuePeekOverview(issueDetail)}
+          className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+        >
+          <div className="w-full overflow-hidden">
+            <Tooltip tooltipHeading="Title" tooltipContent={issueDetail.name}>
+              <div className="h-full w-full cursor-pointer truncate px-4 py-2.5 text-left text-[0.825rem] text-custom-text-100">
+                {issueDetail.name}
+              </div>
+            </Tooltip>
+          </div>
+        </ControlLink>
+      </td>
+      {/* Rest of the columns */}
+      {SPREADSHEET_PROPERTY_LIST.map((property) => {
+        const { Column } = SPREADSHEET_PROPERTY_DETAILS[property];
+
+        const shouldRenderProperty = property === "estimate" ? isEstimateEnabled : true;
+
+        return (
+          <WithDisplayPropertiesHOC
+            displayProperties={displayProperties}
+            displayPropertyKey={property}
+            shouldRenderProperty={shouldRenderProperty}
           >
-            <div className="w-full overflow-hidden">
-              <Tooltip tooltipHeading="Title" tooltipContent={issueDetail.name}>
-                <div className="h-full w-full cursor-pointer truncate px-4 py-2.5 text-left text-[0.825rem] text-custom-text-100">
-                  {issueDetail.name}
-                </div>
-              </Tooltip>
-            </div>
-          </ControlLink>
-        </td>
-        {/* Rest of the columns */}
-        {SPREADSHEET_PROPERTY_LIST.map((property) => {
-          const { Column } = SPREADSHEET_PROPERTY_DETAILS[property];
-
-          const shouldRenderProperty = property === "estimate" ? isEstimateEnabled : true;
-
-          return (
-            <WithDisplayPropertiesHOC
-              displayProperties={displayProperties}
-              displayPropertyKey={property}
-              shouldRenderProperty={shouldRenderProperty}
-            >
-              <td className="h-11 w-full min-w-[8rem] bg-custom-background-100 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-custom-border-100 border-r-[1px] border-custom-border-100">
-                <Column
-                  issue={issueDetail}
-                  onChange={(issue: TIssue, data: Partial<TIssue>) =>
-                    handleIssues({ ...issue, ...data }, EIssueActions.UPDATE)
-                  }
-                  disabled={disableUserActions}
-                />
-              </td>
-            </WithDisplayPropertiesHOC>
-          );
-        })}
-      </tr>
+            <td className="h-11 w-full min-w-[8rem] bg-custom-background-100 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-custom-border-100 border-r-[1px] border-custom-border-100">
+              <Column
+                issue={issueDetail}
+                onChange={(issue: TIssue, data: Partial<TIssue>) =>
+                  handleIssues({ ...issue, ...data }, EIssueActions.UPDATE)
+                }
+                disabled={disableUserActions}
+              />
+            </td>
+          </WithDisplayPropertiesHOC>
+        );
+      })}
 
       {isExpanded &&
         subIssues &&
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
index 369e6633c..4db782cad 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
@@ -5,6 +5,9 @@ import { EIssueActions } from "../types";
 //components
 import { SpreadsheetIssueRow } from "./issue-row";
 import { SpreadsheetHeader } from "./spreadsheet-header";
+import { MutableRefObject, useRef } from "react";
+import RenderIfVisible from "components/core/render-if-visible-HOC";
+import { cn } from "helpers/common.helper";
 
 type Props = {
   displayProperties: IIssueDisplayProperties;
@@ -20,6 +23,7 @@ type Props = {
   handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
   canEditProperties: (projectId: string | undefined) => boolean;
   portalElement: React.MutableRefObject<HTMLDivElement | null>;
+  containerRef: MutableRefObject<HTMLTableElement | null>;
 };
 
 export const SpreadsheetTable = observer((props: Props) => {
@@ -33,6 +37,7 @@ export const SpreadsheetTable = observer((props: Props) => {
     quickActions,
     handleIssues,
     canEditProperties,
+    containerRef,
   } = props;
 
   return (
@@ -45,17 +50,18 @@ export const SpreadsheetTable = observer((props: Props) => {
       />
       <tbody>
         {issueIds.map((id) => (
-          <SpreadsheetIssueRow
-            key={id}
-            issueId={id}
-            displayProperties={displayProperties}
-            quickActions={quickActions}
-            canEditProperties={canEditProperties}
-            nestingLevel={0}
-            isEstimateEnabled={isEstimateEnabled}
-            handleIssues={handleIssues}
-            portalElement={portalElement}
-          />
+          <RenderIfVisible key={id} as="tr" defaultHeight={44.5} root={containerRef}>
+            <SpreadsheetIssueRow
+              issueId={id}
+              displayProperties={displayProperties}
+              quickActions={quickActions}
+              canEditProperties={canEditProperties}
+              nestingLevel={0}
+              isEstimateEnabled={isEstimateEnabled}
+              handleIssues={handleIssues}
+              portalElement={portalElement}
+            />
+          </RenderIfVisible>
         ))}
       </tbody>
     </table>
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
index e99b17850..f4a10da31 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -112,6 +112,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
           quickActions={quickActions}
           handleIssues={handleIssues}
           canEditProperties={canEditProperties}
+          containerRef={containerRef}
         />
       </div>
       <div className="border-t border-custom-border-100">