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,90 +69,149 @@ export const RunsTable: React.FC<RunsTableProps> = ({
   const { t } = useTranslation();
   const navigate = useNavigate();
 
-  const translatedColumns = columns.map(column => ({
-    ...column,
-    label: t(`runstable.${column.id}`, column.label)
-  }));
+  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) => {
-    if (isExpanded) {
-      navigate(`/runs/${robotMetaId}`);
-    } else {
-      navigate(`/runs`);
-    }
-  };
+  const handleAccordionChange = useCallback((robotMetaId: string, isExpanded: boolean) => {
+    navigate(isExpanded ? `/runs/${robotMetaId}` : '/runs');
+  }, [navigate]);
 
-  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>) => {
-    setSearchTerm(event.target.value);
-    setPage(0);
-  };
+  const debouncedSearch = useCallback((fn: Function, delay: number) => {
+    let timeoutId: NodeJS.Timeout;
+    return (...args: any[]) => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => fn(...args), delay);
+    };
+  }, []);
 
-  const fetchRuns = async () => {
-    const runs = await getStoredRuns();
-    if (runs) {
-      const parsedRows: Data[] = runs.map((run: any, index: number) => ({
-        id: index,
-        ...run,
-      }));
-      setRows(parsedRows);
-    } else {
-      notify('error', t('runstable.notifications.no_runs'));
+  const handleSearchChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const debouncedSetSearch = debouncedSearch((value: string) => {
+      setSearchTerm(value);
+      setPage(0);
+    }, 300);
+    debouncedSetSearch(event.target.value);
+  }, [debouncedSearch]);
+
+  const fetchRuns = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      const runs = await getStoredRuns();
+      if (runs) {
+        const parsedRows: Data[] = runs.map((run: any, index: number) => ({
+          id: index,
+          ...run,
+        }));
+        setRows(parsedRows);
+      } else {
+        notify('error', t('runstable.notifications.no_runs'));
+      }
+    } catch (error) {
+      notify('error', t('runstable.notifications.fetch_error'));
+    } finally {
+      setIsLoading(false);
     }
-  };
+  }, [notify, t]);
 
   useEffect(() => {
-    if (rows.length === 0 || rerenderRuns) {
-      fetchRuns();
-      setRerenderRuns(false);
-    }
-  }, [rerenderRuns, rows.length, setRerenderRuns]);
+    let mounted = true;
 
-  const handleDelete = () => {
+    if (rows.length === 0 || rerenderRuns) {
+      fetchRuns().then(() => {
+        if (mounted) {
+          setRerenderRuns(false);
+        }
+      });
+    }
+
+    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) =>
-    row.name.toLowerCase().includes(searchTerm.toLowerCase())
+  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) => {
-    if (!acc[row.robotMetaId]) {
-      acc[row.robotMetaId] = [];
-    }
-    acc[row.robotMetaId].push(row);
-    return acc;
-  }, {} as Record<string, Data[]>);
+  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[]>),
+    [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,62 +219,50 @@ 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)}>
-              <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-                <Typography variant="h6">{data[data.length - 1].name}</Typography>
-              </AccordionSummary>
-              <AccordionDetails>
-                <Table stickyHeader aria-label="sticky table">
-                  <TableHead>
-                    <TableRow>
-                      <TableCell />
-                      {translatedColumns.map((column) => (
-                        <TableCell
-                          key={column.id}
-                          align={column.align}
-                          style={{ minWidth: column.minWidth }}
-                        >
-                          {column.label}
-                        </TableCell>
-                      ))}
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {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>
-      )}
+
+      <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}>
+        {Object.entries(groupedRows).map(([id, data]) => (
+          <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>
+            <AccordionDetails>
+              <Table stickyHeader aria-label="sticky table">
+                <TableHead>
+                  <TableRow>
+                    <TableCell />
+                    {translatedColumns.map((column) => (
+                      <TableCell
+                        key={column.id}
+                        align={column.align}
+                        style={{ minWidth: column.minWidth }}
+                      >
+                        {column.label}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {renderTableRows(data)}
+                </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>
   );