{t('recordingtable.warning_modal.title')}
diff --git a/src/components/run/RunsTable.tsx b/src/components/run/RunsTable.tsx
index 2628bdda0..12b2c84b2 100644
--- a/src/components/run/RunsTable.tsx
+++ b/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
= ({
const [rows, setRows] = useState([]);
const [searchTerm, setSearchTerm] = useState('');
+ const [isLoading, setIsLoading] = useState(true);
const [paginationStates, setPaginationStates] = useState({});
@@ -224,6 +225,8 @@ export const RunsTable: React.FC = ({
}
} catch (error) {
notify('error', t('runstable.notifications.fetch_error'));
+ } finally {
+ setIsLoading(false);
}
}, [notify, t]);
@@ -231,6 +234,7 @@ export const RunsTable: React.FC = ({
let mounted = true;
if (rows.length === 0 || rerenderRuns) {
+ setIsLoading(true);
fetchRuns().then(() => {
if (mounted) {
setRerenderRuns(false);
@@ -378,102 +382,140 @@ export const RunsTable: React.FC = ({
/>
-
- {Object.entries(groupedRows)
- .slice(
- accordionPage * accordionsPerPage,
- accordionPage * accordionsPerPage + accordionsPerPage
- )
- .map(([robotMetaId, data]) => (
- handleAccordionChange(robotMetaId, isExpanded)}
- TransitionProps={{ unmountOnExit: true }} // Optimize accordion rendering
- >
- }>
- {data[0].name}
-
-
-
-
-
-
- {translatedColumns.map((column) => (
- {
- if (column.id === 'startedAt' || column.id === 'finishedAt') {
- handleSort(column.id, robotMetaId);
- }
- }}
- >
-
-
+
+
+ ) : Object.keys(groupedRows).length === 0 ? (
+
+
+ {searchTerm ? t('runstable.placeholder.search') : t('runstable.placeholder.title')}
+
+
+ {searchTerm
+ ? t('recordingtable.search_criteria')
+ : t('runstable.placeholder.body')
+ }
+
+
+ ) : (
+ <>
+
+ {Object.entries(groupedRows)
+ .slice(
+ accordionPage * accordionsPerPage,
+ accordionPage * accordionsPerPage + accordionsPerPage
+ )
+ .map(([robotMetaId, data]) => (
+ handleAccordionChange(robotMetaId, isExpanded)}
+ TransitionProps={{ unmountOnExit: true }} // Optimize accordion rendering
+ >
+ }>
+ {data[0].name}
+
+
+
+
+
+
+ {translatedColumns.map((column) => (
+ {
+ if (column.id === 'startedAt' || column.id === 'finishedAt') {
+ handleSort(column.id, robotMetaId);
+ }
+ }}
+ >
+
- {column.label}
-
- {renderSortIcon(column, robotMetaId)}
-
-
-
-
- ))}
-
-
-
- {renderTableRows(data, robotMetaId)}
-
-
-
- handleChangePage(robotMetaId, newPage)}
- onRowsPerPageChange={(event) =>
- handleChangeRowsPerPage(robotMetaId, +event.target.value)
- }
- rowsPerPageOptions={[10, 25, 50, 100]}
- />
-
-
- ))}
-
-
-
+ >
+
+ {column.label}
+
+ {renderSortIcon(column, robotMetaId)}
+
+
+
+
+ ))}
+
+
+
+ {renderTableRows(data, robotMetaId)}
+
+
+
+ handleChangePage(robotMetaId, newPage)}
+ onRowsPerPageChange={(event) =>
+ handleChangeRowsPerPage(robotMetaId, +event.target.value)
+ }
+ rowsPerPageOptions={[10, 25, 50, 100]}
+ />
+
+
+ ))}
+
+
+
+
+ )}
);
};
\ No newline at end of file