feat: display loader when fetching data

src/components/robot/RecordingsTable.tsx

@@ -23,6 +23,7 @@ import {
   ListItemText,
   FormControlLabel,
   Checkbox,
+  CircularProgress,
 } from "@mui/material";
 import {
   Schedule,
@@ -154,6 +155,7 @@ export const RecordingsTable = ({
   const [searchTerm, setSearchTerm] = React.useState('');
   const [isWarningModalOpen, setWarningModalOpen] = React.useState(false);
   const [activeBrowserId, setActiveBrowserId] = React.useState('');
+  const [isLoading, setIsLoading] = React.useState(true);
 
   const columns = useMemo(() => [
     { id: 'interpret', label: t('recordingtable.run'), minWidth: 80 },
@@ -270,6 +272,8 @@ export const RecordingsTable = ({
     } catch (error) {
       console.error('Error fetching recordings:', error);
       notify('error', t('recordingtable.notifications.fetch_error'));
+    } finally {
+      setIsLoading(false);
     }
   }, [setRecordings, notify, t]);
 
@@ -405,9 +409,7 @@ export const RecordingsTable = ({
   }
 
   useEffect(() => {
-    if (rows.length === 0) {
-      fetchRecordings();
-    }
+    fetchRecordings();
   }, [fetchRecordings]);
 
   useEffect(() => {
@@ -514,7 +516,9 @@ export const RecordingsTable = ({
         </Box>
       </Box>
 
-      {filteredRows.length === 0 ? (
+      {isLoading ? (
+        <CircularProgress size={32} />
+      ) : filteredRows.length === 0 ? (
         <Box
           display="flex"
           flexDirection="column"

src/components/run/RunsTable.tsx

@@ -9,7 +9,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 { Accordion, AccordionSummary, AccordionDetails, Typography, Box, TextField, Tooltip } from '@mui/material';
+import { Accordion, AccordionSummary, AccordionDetails, Typography, Box, TextField, Tooltip, CircularProgress } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import SearchIcon from '@mui/icons-material/Search';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -134,6 +134,7 @@ 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>({});
 
@@ -224,6 +225,8 @@ export const RunsTable: React.FC<RunsTableProps> = ({
       }
     } catch (error) {
       notify('error', t('runstable.notifications.fetch_error'));
+    } finally {
+      setIsLoading(false);
     }
   }, [notify, t]);
 
@@ -231,6 +234,7 @@ export const RunsTable: React.FC<RunsTableProps> = ({
     let mounted = true;
 
     if (rows.length === 0 || rerenderRuns) {
+      setIsLoading(true);
       fetchRuns().then(() => {
         if (mounted) {
           setRerenderRuns(false);
@@ -378,7 +382,9 @@ export const RunsTable: React.FC<RunsTableProps> = ({
         />
       </Box>
 
-      {Object.keys(groupedRows).length === 0 ? (
+      {isLoading? (
+        <CircularProgress size={32} />
+      ) : Object.keys(groupedRows).length === 0 ? (
         <Box
           display="flex"
           flexDirection="column"