From 3ea0c7b03a5c7a113f3c285b2fcfe999785ef9c7 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Fri, 14 Jun 2024 13:40:35 -0300
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20(tableComponent):=20disabl?=
 =?UTF-8?q?e=20row=20animations=20to=20improve=20performance=20=E2=99=BB?=
 =?UTF-8?q?=EF=B8=8F=20(flowLogsModal):=20use=20useMemo=20for=20TableCompo?=
 =?UTF-8?q?nent=20to=20optimize=20rendering?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/tableComponent/index.tsx   |  1 +
 .../src/modals/flowLogsModal/index.tsx        | 28 +++++++++++--------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx
index 954d7d257..4ca1bb22e 100644
--- a/src/frontend/src/components/tableComponent/index.tsx
+++ b/src/frontend/src/components/tableComponent/index.tsx
@@ -144,6 +144,7 @@ const TableComponent = forwardRef<
             minWidth: 100,
             autoHeight: true,
           }}
+          animateRows={false}
           columnDefs={colDef}
           ref={realRef}
           onGridReady={onGridReady}
diff --git a/src/frontend/src/modals/flowLogsModal/index.tsx b/src/frontend/src/modals/flowLogsModal/index.tsx
index 840de14ca..27af4b734 100644
--- a/src/frontend/src/modals/flowLogsModal/index.tsx
+++ b/src/frontend/src/modals/flowLogsModal/index.tsx
@@ -1,5 +1,5 @@
 import { ColDef, ColGroupDef } from "ag-grid-community";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
 import TableComponent from "../../components/tableComponent";
 import { Tabs, TabsList, TabsTrigger } from "../../components/ui/tabs";
@@ -61,6 +61,21 @@ export default function FlowLogsModal({
     }
   }, [open, activeTab]);
 
+  const tableComponentRender = useMemo(() => {
+    return (
+      <TableComponent
+        key={activeTab}
+        readOnlyEdit
+        className="h-max-full h-full w-full"
+        pagination={rows.length === 0 ? false : true}
+        columnDefs={columns}
+        autoSizeStrategy={{ type: "fitGridWidth" }}
+        rowData={rows}
+        headerHeight={rows.length === 0 ? 0 : undefined}
+      />
+    );
+  }, [activeTab]);
+
   return (
     <BaseModal open={open} setOpen={setOpen} size="large">
       <BaseModal.Header description="Inspect component executions and monitor sent messages in the playground.">
@@ -85,16 +100,7 @@ export default function FlowLogsModal({
             <TabsTrigger value={"Messages"}>Messages</TabsTrigger>
           </TabsList>
         </Tabs>
-        <TableComponent
-          key={activeTab}
-          readOnlyEdit
-          className="h-max-full h-full w-full"
-          pagination={rows.length === 0 ? false : true}
-          columnDefs={columns}
-          autoSizeStrategy={{ type: "fitGridWidth" }}
-          rowData={rows}
-          headerHeight={rows.length === 0 ? 0 : undefined}
-        ></TableComponent>
+        {tableComponentRender}
       </BaseModal.Content>
     </BaseModal>
   );