Virtualization like changes for spreadsheet

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

@@ -97,17 +97,15 @@ 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,
           }
         )}
       >
@@ -183,7 +181,6 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
           </WithDisplayPropertiesHOC>
         );
       })}
-      </tr>
 
       {isExpanded &&
         subIssues &&

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,8 +50,8 @@ export const SpreadsheetTable = observer((props: Props) => {
       />
       <tbody>
         {issueIds.map((id) => (
+          <RenderIfVisible key={id} as="tr" defaultHeight={44.5} root={containerRef}>
             <SpreadsheetIssueRow
-            key={id}
               issueId={id}
               displayProperties={displayProperties}
               quickActions={quickActions}
@@ -56,6 +61,7 @@ export const SpreadsheetTable = observer((props: Props) => {
               handleIssues={handleIssues}
               portalElement={portalElement}
             />
+          </RenderIfVisible>
         ))}
       </tbody>
     </table>

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">