feat: memoize runs table

src/components/run/RunsTable.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from 'react-i18next';
 import Paper from '@mui/material/Paper';
 import Table from '@mui/material/Table';
@@ -69,41 +69,54 @@ export const RunsTable: React.FC<RunsTableProps> = ({
   const { t } = useTranslation();
   const navigate = useNavigate();
 
-  const translatedColumns = columns.map(column => ({
+  const translatedColumns = useMemo(() => 
+    columns.map(column => ({
       ...column,
       label: t(`runstable.${column.id}`, column.label)
-  }));
+    })),
+    [t]
+  );
 
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(10);
   const [rows, setRows] = useState<Data[]>([]);
   const [searchTerm, setSearchTerm] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
 
   const { notify, rerenderRuns, setRerenderRuns } = useGlobalInfoStore();
 
-  const handleAccordionChange = (robotMetaId: string, isExpanded: boolean) => {
+  const handleAccordionChange = useCallback((robotMetaId: string, isExpanded: boolean) => {
-    if (isExpanded) {
+    navigate(isExpanded ? `/runs/${robotMetaId}` : '/runs');
-      navigate(`/runs/${robotMetaId}`);
+  }, [navigate]);
-    } else {
-      navigate(`/runs`);
-    }
-  };
 
-  const handleChangePage = (event: unknown, newPage: number) => {
+  const handleChangePage = useCallback((event: unknown, newPage: number) => {
     setPage(newPage);
-  };
+  }, []);
 
-  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChangeRowsPerPage = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     setRowsPerPage(+event.target.value);
     setPage(0);
-  };
+  }, []);
 
-  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const debouncedSearch = useCallback((fn: Function, delay: number) => {
-    setSearchTerm(event.target.value);
+    let timeoutId: NodeJS.Timeout;
+    return (...args: any[]) => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => fn(...args), delay);
+    };
+  }, []);
+
+  const handleSearchChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const debouncedSetSearch = debouncedSearch((value: string) => {
+      setSearchTerm(value);
       setPage(0);
-  };
+    }, 300);
+    debouncedSetSearch(event.target.value);
+  }, [debouncedSearch]);
 
-  const fetchRuns = async () => {
+  const fetchRuns = useCallback(async () => {
+    try {
+      setIsLoading(true);
       const runs = await getStoredRuns();
       if (runs) {
         const parsedRows: Data[] = runs.map((run: any, index: number) => ({
@@ -114,45 +127,91 @@ export const RunsTable: React.FC<RunsTableProps> = ({
       } else {
         notify('error', t('runstable.notifications.no_runs'));
       }
-  };
+    } catch (error) {
+      notify('error', t('runstable.notifications.fetch_error'));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [notify, t]);
 
   useEffect(() => {
+    let mounted = true;
+
     if (rows.length === 0 || rerenderRuns) {
-      fetchRuns();
+      fetchRuns().then(() => {
+        if (mounted) {
           setRerenderRuns(false);
         }
-  }, [rerenderRuns, rows.length, setRerenderRuns]);
+      });
+    }
 
-  const handleDelete = () => {
+    return () => {
+      mounted = false;
+    };
+  }, [rerenderRuns, rows.length, setRerenderRuns, fetchRuns]);
+
+  const handleDelete = useCallback(() => {
     setRows([]);
     notify('success', t('runstable.notifications.delete_success'));
     fetchRuns();
-  };
+  }, [notify, t, fetchRuns]);
 
   // Filter rows based on search term
-  const filteredRows = rows.filter((row) =>
+  const filteredRows = useMemo(() => 
+    rows.filter((row) =>
       row.name.toLowerCase().includes(searchTerm.toLowerCase())
+    ),
+    [rows, searchTerm]
   );
 
   // Group filtered rows by robot meta id
-  const groupedRows = filteredRows.reduce((acc, row) => {
+  const groupedRows = useMemo(() => 
+    filteredRows.reduce((acc, row) => {
       if (!acc[row.robotMetaId]) {
         acc[row.robotMetaId] = [];
       }
       acc[row.robotMetaId].push(row);
       return acc;
-  }, {} as Record<string, Data[]>);
+    }, {} as Record<string, Data[]>),
+    [filteredRows]
+  );
+
+  const renderTableRows = useCallback((data: Data[]) => {
+    const start = page * rowsPerPage;
+    const end = start + rowsPerPage;
+    
+    return data
+      .slice(start, end)
+      .map((row) => (
+        <CollapsibleRow
+          key={`row-${row.id}`}
+          row={row}
+          handleDelete={handleDelete}
+          isOpen={runId === row.runId && runningRecordingName === row.name}
+          currentLog={currentInterpretationLog}
+          abortRunHandler={abortRunHandler}
+          runningRecordingName={runningRecordingName}
+        />
+      ));
+  }, [page, rowsPerPage, runId, runningRecordingName, currentInterpretationLog, abortRunHandler, handleDelete]);
+
+  if (isLoading) {
+    return (
+      <Box display="flex" justifyContent="center" alignItems="center" height="50vh">
+        <CircularProgress />
+      </Box>
+    );
+  }
 
   return (
     <React.Fragment>
       <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
-        <Typography variant="h6" gutterBottom>
+        <Typography variant="h6" component="h2">
           {t('runstable.runs', 'Runs')}
         </Typography>
         <TextField
           size="small"
           placeholder={t('runstable.search', 'Search runs...')}
-          value={searchTerm}
           onChange={handleSearchChange}
           InputProps={{
             startAdornment: <SearchIcon sx={{ color: 'action.active', mr: 1 }} />
@@ -160,14 +219,14 @@ export const RunsTable: React.FC<RunsTableProps> = ({
           sx={{ width: '250px' }}
         />
       </Box>
-      {rows.length === 0 ? (
+
-        <Box display="flex" justifyContent="center" alignItems="center" height="50%">
-          <CircularProgress />
-        </Box>
-      ) : (
       <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}>
         {Object.entries(groupedRows).map(([id, data]) => (
-            <Accordion key={id} onChange={(event, isExpanded) => handleAccordionChange(id, isExpanded)}>
+          <Accordion 
+            key={id} 
+            onChange={(event, isExpanded) => handleAccordionChange(id, isExpanded)}
+            TransitionProps={{ unmountOnExit: true }} // Optimize accordion rendering
+          >
             <AccordionSummary expandIcon={<ExpandMoreIcon />}>
               <Typography variant="h6">{data[data.length - 1].name}</Typography>
             </AccordionSummary>
@@ -188,34 +247,22 @@ export const RunsTable: React.FC<RunsTableProps> = ({
                   </TableRow>
                 </TableHead>
                 <TableBody>
-                    {data
+                  {renderTableRows(data)}
-                      .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                      .map((row) => (
-                        <CollapsibleRow
-                          row={row}
-                          handleDelete={handleDelete}
-                          key={`row-${row.id}`}
-                          isOpen={runId === row.runId && runningRecordingName === row.name}
-                          currentLog={currentInterpretationLog}
-                          abortRunHandler={abortRunHandler}
-                          runningRecordingName={runningRecordingName}
-                        />
-                      ))}
                 </TableBody>
               </Table>
             </AccordionDetails>
           </Accordion>
         ))}
       </TableContainer>
-      )}
+
       <TablePagination
-        rowsPerPageOptions={[10, 25, 50]}
         component="div"
         count={filteredRows.length}
         rowsPerPage={rowsPerPage}
         page={page}
         onPageChange={handleChangePage}
         onRowsPerPageChange={handleChangeRowsPerPage}
+        rowsPerPageOptions={[10, 25, 50]}
       />
     </React.Fragment>
   );