feat: memoize recordings table

src/components/robot/RecordingsTable.tsx

@@ -8,7 +8,7 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TablePagination from '@mui/material/TablePagination';
 import TableRow from '@mui/material/TableRow';
-import { useEffect } from "react";
+import { memo, useCallback, useEffect, useMemo } from "react";
 import { WorkflowFile } from "maxun-core";
 import SearchIcon from '@mui/icons-material/Search';
 import { IconButton, Button, Box, Typography, TextField, MenuItem, Menu, ListItemIcon, ListItemText, CircularProgress, RadioGroup, FormControlLabel, Radio } from "@mui/material";
@@ -52,6 +52,64 @@ interface RecordingsTableProps {
   handleDuplicateRobot: (id: string, name: string, params: string[]) => void;
 }
 
+// Virtualized row component for efficient rendering
+const TableRowMemoized = memo(({ row, columns, handlers }: any) => {
+  return (
+    <TableRow hover role="checkbox" tabIndex={-1}>
+      {columns.map((column: Column) => {
+        const value: any = row[column.id];
+        if (value !== undefined) {
+          return (
+            <MemoizedTableCell key={column.id} align={column.align}>
+              {value}
+            </MemoizedTableCell>
+          );
+        } else {
+          switch (column.id) {
+            case 'interpret':
+              return (
+                <MemoizedTableCell key={column.id} align={column.align}>
+                  <MemoizedInterpretButton handleInterpret={() => handlers.handleRunRecording(row.id, row.name, row.params || [])} />
+                </MemoizedTableCell>
+              );
+            case 'schedule':
+              return (
+                <MemoizedTableCell key={column.id} align={column.align}>
+                  <MemoizedScheduleButton handleSchedule={() => handlers.handleScheduleRecording(row.id, row.name, row.params || [])} />
+                </MemoizedTableCell>
+              );
+            case 'integrate':
+              return (
+                <MemoizedTableCell key={column.id} align={column.align}>
+                  <MemoizedIntegrateButton handleIntegrate={() => handlers.handleIntegrateRecording(row.id, row.name, row.params || [])} />
+                </MemoizedTableCell>
+              );
+            case 'options':
+              return (
+                <MemoizedTableCell key={column.id} align={column.align}>
+                  <MemoizedOptionsButton
+                    handleEdit={() => handlers.handleEditRobot(row.id, row.name, row.params || [])}
+                    handleDuplicate={() => handlers.handleDuplicateRobot(row.id, row.name, row.params || [])}
+                    handleDelete={() => handlers.handleDelete(row.id)}
+                  />
+                </MemoizedTableCell>
+              );
+            case 'settings':
+              return (
+                <MemoizedTableCell key={column.id} align={column.align}>
+                  <MemoizedSettingsButton handleSettings={() => handlers.handleSettingsRecording(row.id, row.name, row.params || [])} />
+                </MemoizedTableCell>
+              );
+            default:
+              return null;
+          }
+        }
+      })}
+    </TableRow>
+  );
+});
+
+
 export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handleScheduleRecording, handleIntegrateRecording, handleSettingsRecording, handleEditRobot, handleDuplicateRobot }: RecordingsTableProps) => {
   const { t } = useTranslation();
   const [page, setPage] = React.useState(0);
@@ -59,83 +117,77 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
   const [rows, setRows] = React.useState<Data[]>([]);
   const [isModalOpen, setModalOpen] = React.useState(false);
   const [searchTerm, setSearchTerm] = React.useState('');
+  const [isLoading, setIsLoading] = React.useState(true);
 
-  const columns: readonly Column[] = [
+  const columns = useMemo(() => [
     { id: 'interpret', label: t('recordingtable.run'), minWidth: 80 },
     { id: 'name', label: t('recordingtable.name'), minWidth: 80 },
-    {
+    { id: 'schedule', label: t('recordingtable.schedule'), minWidth: 80 },
-      id: 'schedule',
+    { id: 'integrate', label: t('recordingtable.integrate'), minWidth: 80 },
-      label: t('recordingtable.schedule'),
+    { id: 'settings', label: t('recordingtable.settings'), minWidth: 80 },
-      minWidth: 80,
+    { id: 'options', label: t('recordingtable.options'), minWidth: 80 },
-    },
+  ], [t]);
-    {
-      id: 'integrate',
-      label: t('recordingtable.integrate'),
-      minWidth: 80,
-    },
-    {
-      id: 'settings',
-      label: t('recordingtable.settings'),
-      minWidth: 80,
-    },
-    {
-      id: 'options',
-      label: t('recordingtable.options'),
-      minWidth: 80,
-    },
-  ];
 
   const { notify, setRecordings, browserId, setBrowserId, setInitialUrl, recordingUrl, setRecordingUrl, isLogin, setIsLogin, recordingName, setRecordingName, recordingId, setRecordingId } = useGlobalInfoStore();
   const navigate = useNavigate();
 
-  const handleChangePage = (event: unknown, newPage: number) => {
+  const handleChangePage = useCallback((event: unknown, newPage: number) => {
     setPage(newPage);
-  };
+  }, []);
 
   const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
     setRowsPerPage(+event.target.value);
     setPage(0);
   };
 
-  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleSearchChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchTerm(event.target.value);
     setPage(0);
-  };
+  }, []);
 
-  const fetchRecordings = async () => {
+  const fetchRecordings = useCallback(async () => {
-    const recordings = await getStoredRecordings();
+    setIsLoading(true);
-    if (recordings) {
+    try {
-      const parsedRows: Data[] = [];
+      const recordings = await getStoredRecordings();
-      recordings.map((recording: any, index: number) => {
+      if (recordings) {
-        if (recording && recording.recording_meta) {
+        const parsedRows = recordings
-          parsedRows.push({
+          .map((recording: any, index: number) => {
-            id: index,
+            if (recording?.recording_meta) {
-            ...recording.recording_meta,
+              return {
-            content: recording.recording
+                id: index,
-          });
+                ...recording.recording_meta,
-        }
+                content: recording.recording
-      });
+              };
-      setRecordings(parsedRows.map((recording) => recording.name));
+            }
-      setRows(parsedRows);
+            return null;
-    } else {
+          })
-      console.log('No recordings found.');
+          .filter(Boolean);
+
+        setRecordings(parsedRows.map((recording) => recording.name));
+        setRows(parsedRows);
+      }
+    } catch (error) {
+      console.error('Error fetching recordings:', error);
+      notify('error', t('recordingtable.notifications.fetch_error'));
+    } finally {
+      setIsLoading(false);
     }
-  }
+  }, [setRecordings, notify, t]);
 
-  const handleNewRecording = async () => {
+  const handleNewRecording = useCallback(async () => {
     if (browserId) {
       setBrowserId(null);
       await stopRecording(browserId);
     }
     setModalOpen(true);
-  };
+  }, [browserId]);
 
-  const handleStartRecording = () => {
+  const handleStartRecording = useCallback(() => {
     setBrowserId('new-recording');
     setRecordingName('');
     setRecordingId('');
     navigate('/recording');
-  }
+  }, [navigate]);
 
   const startRecording = () => {
     setModalOpen(false);
@@ -151,14 +203,61 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
     if (rows.length === 0) {
       fetchRecordings();
     }
-  }, []);
+  }, [fetchRecordings]);
 
+  function useDebounce<T>(value: T, delay: number): T {
+    const [debouncedValue, setDebouncedValue] = React.useState<T>(value);
+  
+    useEffect(() => {
+      const handler = setTimeout(() => {
+        setDebouncedValue(value);
+      }, delay);
+  
+      return () => {
+        clearTimeout(handler);
+      };
+    }, [value, delay]);
+  
+    return debouncedValue;
+  }
+
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
 
   // Filter rows based on search term
-  const filteredRows = rows.filter((row) =>
+  const filteredRows = useMemo(() => {
-    row.name.toLowerCase().includes(searchTerm.toLowerCase())
+    const searchLower = searchTerm.toLowerCase();
-  );
+    return searchTerm
+      ? rows.filter(row => row.name.toLowerCase().includes(searchLower))
+      : rows;
+  }, [rows, debouncedSearchTerm]);
 
+  const visibleRows = useMemo(() => {
+    const start = page * rowsPerPage;
+    return filteredRows.slice(start, start + rowsPerPage);
+  }, [filteredRows, page, rowsPerPage]);
+
+  const handlers = useMemo(() => ({
+    handleRunRecording,
+    handleScheduleRecording,
+    handleIntegrateRecording,
+    handleSettingsRecording,
+    handleEditRobot,
+    handleDuplicateRobot,
+    handleDelete: async (id: string) => {
+      const hasRuns = await checkRunsForRecording(id);
+      if (hasRuns) {
+        notify('warning', t('recordingtable.notifications.delete_warning'));
+        return;
+      }
+
+      const success = await deleteRecordingFromStorage(id);
+      if (success) {
+        setRows([]);
+        notify('success', t('recordingtable.notifications.delete_success'));
+        fetchRecordings();
+      }
+    }
+  }), [handleRunRecording, handleScheduleRecording, handleIntegrateRecording, handleSettingsRecording, handleEditRobot, handleDuplicateRobot, notify, t]);
 
   return (
     <React.Fragment>
@@ -200,7 +299,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
           </IconButton>
         </Box>
       </Box>
-      {rows.length === 0 ? (
+      {isLoading ? (
         <Box display="flex" justifyContent="center" alignItems="center" height="50%">
           <CircularProgress />
         </Box>
@@ -210,99 +309,32 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
             <TableHead>
               <TableRow>
                 {columns.map((column) => (
-                  <TableCell
+                  <MemoizedTableCell
                     key={column.id}
-                    align={column.align}
+                    // align={column.align}
                     style={{ minWidth: column.minWidth }}
                   >
                     {column.label}
-                  </TableCell>
+                  </MemoizedTableCell>
                 ))}
               </TableRow>
             </TableHead>
             <TableBody>
-              {filteredRows.length !== 0 ? filteredRows
+              {visibleRows.map((row) => (
-                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                <TableRowMemoized
-                .map((row) => {
+                  key={row.id}
-                  return (
+                  row={row}
-                    <TableRow hover role="checkbox" tabIndex={-1} key={row.id}>
+                  columns={columns}
-                      {columns.map((column) => {
+                  handlers={handlers}
-                        // @ts-ignore
+                />
-                        const value: any = row[column.id];
+              ))}
-                        if (value !== undefined) {
-                          return (
-                            <TableCell key={column.id} align={column.align}>
-                              {value}
-                            </TableCell>
-                          );
-                        } else {
-                          switch (column.id) {
-                            case 'interpret':
-                              return (
-                                <TableCell key={column.id} align={column.align}>
-                                  <InterpretButton handleInterpret={() => handleRunRecording(row.id, row.name, row.params || [])} />
-                                </TableCell>
-                              );
-                            case 'schedule':
-                              return (
-                                <TableCell key={column.id} align={column.align}>
-                                  <ScheduleButton handleSchedule={() => handleScheduleRecording(row.id, row.name, row.params || [])} />
-                                </TableCell>
-                              );
-                            case 'integrate':
-                              return (
-                                <TableCell key={column.id} align={column.align}>
-                                  <IntegrateButton handleIntegrate={() => handleIntegrateRecording(row.id, row.name, row.params || [])} />
-                                </TableCell>
-                              );
-                            case 'options':
-                              return (
-                                <TableCell key={column.id} align={column.align}>
-                                  <OptionsButton
-                                    handleEdit={() => handleEditRobot(row.id, row.name, row.params || [])}
-                                    handleDuplicate={() => {
-                                      handleDuplicateRobot(row.id, row.name, row.params || []);
-                                    }}
-                                    handleDelete={() => {
-
-                                      checkRunsForRecording(row.id).then((result: boolean) => {
-                                        if (result) {
-                                          notify('warning', t('recordingtable.notifications.delete_warning'));
-                                        }
-                                      })
-
-                                      deleteRecordingFromStorage(row.id).then((result: boolean) => {
-                                        if (result) {
-                                          setRows([]);
-                                          notify('success', t('recordingtable.notifications.delete_success'));
-                                          fetchRecordings();
-                                        }
-                                      })
-                                    }}
-                                  />
-                                </TableCell>
-                              );
-                            case 'settings':
-                              return (
-                                <TableCell key={column.id} align={column.align}>
-                                  <SettingsButton handleSettings={() => handleSettingsRecording(row.id, row.name, row.params || [])} />
-                                </TableCell>
-                              );
-                            default:
-                              return null;
-                          }
-                        }
-                      })}
-                    </TableRow>
-                  );
-                })
-                : null}
             </TableBody>
           </Table>
         </TableContainer>
       )}
+
       <TablePagination
-        rowsPerPageOptions={[10, 25, 50]}
+        rowsPerPageOptions={[10, 25, 50, 100]}
         component="div"
         count={filteredRows.length}
         rowsPerPage={rowsPerPage}
@@ -466,6 +498,15 @@ const OptionsButton = ({ handleEdit, handleDelete, handleDuplicate }: OptionsBut
   );
 };
 
+const MemoizedTableCell = memo(TableCell);
+
+// Memoized action buttons
+const MemoizedInterpretButton = memo(InterpretButton);
+const MemoizedScheduleButton = memo(ScheduleButton);
+const MemoizedIntegrateButton = memo(IntegrateButton);
+const MemoizedSettingsButton = memo(SettingsButton);
+const MemoizedOptionsButton = memo(OptionsButton);
+
 const modalStyle = {
   top: '50%',
   left: '50%',