Merge pull request #425 from getmaxun/flicker-fix

feat: prevent flickering of table ui on empty data

src/components/robot/RecordingsTable.tsx

@@ -148,7 +148,6 @@ export const RecordingsTable = ({
   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 = useMemo(() => [
     { id: 'interpret', label: t('recordingtable.run'), minWidth: 80 },
@@ -202,7 +201,6 @@ export const RecordingsTable = ({
   };
 
   const fetchRecordings = useCallback(async () => {
-    setIsLoading(true);
     try {
       const recordings = await getStoredRecordings();
       if (recordings) {
@@ -222,15 +220,13 @@ export const RecordingsTable = ({
         })
         .filter(Boolean) 
         .sort((a, b) => b.parsedDate.getTime() - a.parsedDate.getTime());
-
+  
         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]);
 
@@ -359,39 +355,32 @@ export const RecordingsTable = ({
           </IconButton>
         </Box>
       </Box>
-      {isLoading ? (
-        <Box display="flex" justifyContent="center" alignItems="center" height="50%">
-          <CircularProgress />
-        </Box>
-      ) : (
-        <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden', marginTop: '15px' }}>
-          <Table stickyHeader aria-label="sticky table">
-            <TableHead>
-              <TableRow>
-                {columns.map((column) => (
-                  <MemoizedTableCell
-                    key={column.id}
-                    // align={column.align}
-                    style={{ minWidth: column.minWidth }}
-                  >
-                    {column.label}
-                  </MemoizedTableCell>
-                ))}
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {visibleRows.map((row) => (
-                <TableRowMemoized
-                  key={row.id}
-                  row={row}
-                  columns={columns}
-                  handlers={handlers}
-                />
+      <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden', marginTop: '15px' }}>
+        <Table stickyHeader aria-label="sticky table">
+          <TableHead>
+            <TableRow>
+              {columns.map((column) => (
+                <MemoizedTableCell
+                  key={column.id}
+                  style={{ minWidth: column.minWidth }}
+                >
+                  {column.label}
+                </MemoizedTableCell>
               ))}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      )}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {visibleRows.map((row) => (
+              <TableRowMemoized
+                key={row.id}
+                row={row}
+                columns={columns}
+                handlers={handlers}
+              />
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
 
       <TablePagination
         rowsPerPageOptions={[10, 25, 50, 100]}

src/components/run/RunsTable.tsx

@@ -133,7 +133,6 @@ export const RunsTable: React.FC<RunsTableProps> = ({
 
   const [rows, setRows] = useState<Data[]>([]);
   const [searchTerm, setSearchTerm] = useState('');
-  const [isLoading, setIsLoading] = useState(true);
 
   const [paginationStates, setPaginationStates] = useState<PaginationState>({});
 
@@ -212,7 +211,6 @@ export const RunsTable: React.FC<RunsTableProps> = ({
 
   const fetchRuns = useCallback(async () => {
     try {
-      setIsLoading(true);
       const runs = await getStoredRuns();
       if (runs) {
         const parsedRows: Data[] = runs.map((run: any, index: number) => ({
@@ -225,8 +223,6 @@ export const RunsTable: React.FC<RunsTableProps> = ({
       }
     } catch (error) {
       notify('error', t('runstable.notifications.fetch_error'));
-    } finally {
-      setIsLoading(false);
     }
   }, [notify, t]);
 
@@ -364,14 +360,6 @@ export const RunsTable: React.FC<RunsTableProps> = ({
         : <UnfoldMore fontSize="small" />;
   }, [accordionSortConfigs]);
 
-  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}>