Merge pull request #358 from getmaxun/improve-ui

feat(ui): runs & robots loader

src/components/robot/RecordingsTable.tsx

@@ -11,7 +11,7 @@ import TableRow from '@mui/material/TableRow';
 import { useEffect } from "react";
 import { WorkflowFile } from "maxun-core";
 import SearchIcon from '@mui/icons-material/Search';
-import { IconButton, Button, Box, Typography, TextField, MenuItem, Menu, ListItemIcon, ListItemText } from "@mui/material";
+import { IconButton, Button, Box, Typography, TextField, MenuItem, Menu, ListItemIcon, ListItemText, CircularProgress } from "@mui/material";
 import { Schedule, DeleteForever, Edit, PlayCircle, Settings, Power, ContentCopy, MoreHoriz } from "@mui/icons-material";
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { checkRunsForRecording, deleteRecordingFromStorage, getStoredRecordings } from "../../api/storage";
@@ -200,6 +200,11 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
           </IconButton>
         </Box>
       </Box>
+      {rows.length === 0 ? (
+        <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>
@@ -295,6 +300,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
             </TableBody>
           </Table>
         </TableContainer>
+      )}
       <TablePagination
         rowsPerPageOptions={[10, 25, 50]}
         component="div"

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 } from '@mui/material';
+import { Accordion, AccordionSummary, AccordionDetails, Typography, Box, TextField, CircularProgress } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import SearchIcon from '@mui/icons-material/Search';
 import { useNavigate } from 'react-router-dom';
@@ -18,7 +18,6 @@ import { getStoredRuns } from "../../api/storage";
 import { RunSettings } from "./RunSettings";
 import { CollapsibleRow } from "./ColapsibleRow";
 
-// Export columns before the component
 export const columns: readonly Column[] = [
   { id: 'runStatus', label: 'Status', minWidth: 80 },
   { id: 'name', label: 'Name', minWidth: 80 },
@@ -70,7 +69,6 @@ export const RunsTable: React.FC<RunsTableProps> = ({
   const { t } = useTranslation();
   const navigate = useNavigate();
 
-  // Update column labels using translation if needed
   const translatedColumns = columns.map(column => ({
     ...column,
     label: t(`runstable.${column.id}`, column.label)
@@ -162,6 +160,11 @@ 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)}>
@@ -204,6 +207,7 @@ export const RunsTable: React.FC<RunsTableProps> = ({
             </Accordion>
           ))}
         </TableContainer>
+      )}
       <TablePagination
         rowsPerPageOptions={[10, 25, 50]}
         component="div"