From f40d79ff840963d66bbe35b1f2a6d721822af9d0 Mon Sep 17 00:00:00 2001
From: Ali Garajian <aligarajian1@gmail.com>
Date: Fri, 16 Jun 2023 15:00:26 +0330
Subject: [PATCH] feat(ObjectManager): virtualize download/upload object list

---
 .../Common/ObjectManager/ObjectManager.tsx    | 26 ++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/portal-ui/src/screens/Console/Common/ObjectManager/ObjectManager.tsx b/portal-ui/src/screens/Console/Common/ObjectManager/ObjectManager.tsx
index eb1923af84..71e338203e 100644
--- a/portal-ui/src/screens/Console/Common/ObjectManager/ObjectManager.tsx
+++ b/portal-ui/src/screens/Console/Common/ObjectManager/ObjectManager.tsx
@@ -28,6 +28,7 @@ import {
   deleteFromList,
 } from "../../ObjectBrowser/objectBrowserSlice";
 import clsx from "clsx";
+import VirtualizedList from "../VirtualizedList/VirtualizedList";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -66,6 +67,7 @@ const styles = (theme: Theme) =>
       overflowX: "hidden",
       minHeight: 250,
       maxHeight: 335,
+      height: "100%",
       width: "100%",
       display: "flex",
       flexDirection: "column",
@@ -98,6 +100,16 @@ const ObjectManager = ({ classes }: IObjectManager) => {
   const anonymousMode = useSelector(
     (state: AppState) => state.system.anonymousMode
   );
+
+  function renderObject(index: number) {
+    return (
+      <ObjectHandled
+        objectToDisplay={objects[index]}
+        deleteFromList={(instanceID) => dispatch(deleteFromList(instanceID))}
+      />
+    );
+  }
+
   return (
     <Fragment>
       {managerOpen && (
@@ -123,15 +135,11 @@ const ObjectManager = ({ classes }: IObjectManager) => {
           </div>
           <div className={classes.title}>Downloads / Uploads</div>
           <div className={classes.actionsContainer}>
-            {objects.map((object, key) => (
-              <ObjectHandled
-                objectToDisplay={object}
-                key={`object-handled-${object.instanceID}`}
-                deleteFromList={(instanceID) =>
-                  dispatch(deleteFromList(instanceID))
-                }
-              />
-            ))}
+            <VirtualizedList
+              rowRenderFunction={renderObject}
+              totalItems={objects.length}
+              defaultHeight={110}
+            />
           </div>
         </Box>
       )}