From 03dd67bee2dab2e49cec2210c420c6d95b90b4cd Mon Sep 17 00:00:00 2001
From: Julien Deniau <julien.deniau@gmail.com>
Date: Wed, 9 Oct 2024 00:22:40 +0200
Subject: [PATCH] limit antd menu performance issue using useMemo

---
 src/renderer/component/TableList.tsx          | 32 ++++++++++---------
 .../routes/connections.$connectionSlug.tsx    | 11 +++++--
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/renderer/component/TableList.tsx b/src/renderer/component/TableList.tsx
index 6ec9b5c..8b1f354 100644
--- a/src/renderer/component/TableList.tsx
+++ b/src/renderer/component/TableList.tsx
@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { ReactElement, useMemo } from 'react';
 import { Menu, MenuProps } from 'antd';
 import { Link, useParams } from 'react-router-dom';
 import { useConnectionContext } from '../../contexts/ConnectionContext';
@@ -18,24 +18,26 @@ export default function TableList({
   const { database } = useDatabaseContext();
   const { tableName } = useParams();
 
+  const items: MenuItem[] = useMemo(
+    () =>
+      tableStatusList?.map((rowDataPacket: ShowTableStatus) => ({
+        key: rowDataPacket.Name,
+        label: (
+          <Link
+            to={`/connections/${currentConnectionSlug}/${database}/tables/${rowDataPacket.Name}`}
+          >
+            {rowDataPacket.Name}
+          </Link>
+        ),
+        title: rowDataPacket.Name,
+      })),
+    [currentConnectionSlug, database, tableStatusList]
+  );
+
   if (!tableStatusList) {
     return null;
   }
 
-  const items: MenuItem[] = tableStatusList.map(
-    (rowDataPacket: ShowTableStatus) => ({
-      key: rowDataPacket.Name,
-      label: (
-        <Link
-          to={`/connections/${currentConnectionSlug}/${database}/tables/${rowDataPacket.Name}`}
-        >
-          {rowDataPacket.Name}
-        </Link>
-      ),
-      title: rowDataPacket.Name,
-    })
-  );
-
   return (
     <Menu items={items} selectedKeys={tableName ? [tableName] : undefined} />
   );
diff --git a/src/renderer/routes/connections.$connectionSlug.tsx b/src/renderer/routes/connections.$connectionSlug.tsx
index 559f6bb..5ce3ef7 100644
--- a/src/renderer/routes/connections.$connectionSlug.tsx
+++ b/src/renderer/routes/connections.$connectionSlug.tsx
@@ -27,6 +27,11 @@ import NavigateModalContextProvider, {
 const Sider = styled(Layout.Sider)`
   border-right: 1px solid ${foreground};
   background: ${background} !important;
+  overflow: auto;
+`;
+
+const Content = styled(Layout.Content)`
+  overflow: auto;
 `;
 
 interface RouteParams extends LoaderFunctionArgs {
@@ -114,16 +119,16 @@ export default function ConnectionDetailPage() {
           <AllColumnsContextProvider allColumns={allColumns}>
             <NavigateModalContextProvider>
               <Layout>
-                <Sider width={200} style={{ overflow: 'auto' }}>
+                <Sider width={200}>
                   <Flex vertical gap="small">
                     <DatabaseSelector databaseList={databaseList} />
                     <OpenNavigateModalButton />
                     <TableList tableStatusList={tableStatusList} />
                   </Flex>
                 </Sider>
-                <Layout.Content style={{ overflow: 'auto' }}>
+                <Content>
                   <Outlet />
-                </Layout.Content>
+                </Content>
               </Layout>
             </NavigateModalContextProvider>
           </AllColumnsContextProvider>