vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #425 from getmaxun/flicker-fix

Browse Source 
feat: prevent flickering of table ui on empty data
This commit is contained in:
Karishma Shukla
2025-01-31 15:34:33 +05:30
committed by GitHub
parent ca4bc725fd fed1640ae4
commit 3209e2717d
2 changed files with 26 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/robot/RecordingsTable.tsx
View File

@@ -148,7 +148,6 @@ export const RecordingsTable = ({
const [rows, setRows] = React.useState<Data[]>([]); const [rows, setRows] = React.useState<Data[]>([]);
const [isModalOpen, setModalOpen] = React.useState(false); const [isModalOpen, setModalOpen] = React.useState(false);
const [searchTerm, setSearchTerm] = React.useState(''); const [searchTerm, setSearchTerm] = React.useState('');
const [isLoading, setIsLoading] = React.useState(true);
const columns = useMemo(() => [ const columns = useMemo(() => [
{ id: 'interpret', label: t('recordingtable.run'), minWidth: 80 }, { id: 'interpret', label: t('recordingtable.run'), minWidth: 80 },
@@ -202,7 +201,6 @@ export const RecordingsTable = ({
}; };
const fetchRecordings = useCallback(async () => { const fetchRecordings = useCallback(async () => {
setIsLoading(true);
try { try {
const recordings = await getStoredRecordings(); const recordings = await getStoredRecordings();
if (recordings) { if (recordings) {
@@ -229,8 +227,6 @@ export const RecordingsTable = ({
} catch (error) { } catch (error) {
console.error('Error fetching recordings:', error); console.error('Error fetching recordings:', error);
notify('error', t('recordingtable.notifications.fetch_error')); notify('error', t('recordingtable.notifications.fetch_error'));
} finally {
setIsLoading(false);
} }
}, [setRecordings, notify, t]); }, [setRecordings, notify, t]);
@@ -359,39 +355,32 @@ export const RecordingsTable = ({
</IconButton> </IconButton>
</Box> </Box>
</Box> </Box>
{isLoading ? ( <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden', marginTop: '15px' }}>
<Box display="flex" justifyContent="center" alignItems="center" height="50%"> <Table stickyHeader aria-label="sticky table">
<CircularProgress /> <TableHead>
</Box> <TableRow>
) : ( {columns.map((column) => (
<TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden', marginTop: '15px' }}> <MemoizedTableCell
<Table stickyHeader aria-label="sticky table"> key={column.id}
<TableHead> style={{ minWidth: column.minWidth }}
<TableRow> >
{columns.map((column) => ( {column.label}
<MemoizedTableCell </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}
/>
))} ))}
</TableBody> </TableRow>
</Table> </TableHead>
</TableContainer> <TableBody>
)} {visibleRows.map((row) => (
<TableRowMemoized
key={row.id}
row={row}
columns={columns}
handlers={handlers}
/>
))}
</TableBody>
</Table>
</TableContainer>
<TablePagination <TablePagination
rowsPerPageOptions={[10, 25, 50, 100]} rowsPerPageOptions={[10, 25, 50, 100]}

12
src/components/run/RunsTable.tsx
View File

@@ -133,7 +133,6 @@ export const RunsTable: React.FC<RunsTableProps> = ({
const [rows, setRows] = useState<Data[]>([]); const [rows, setRows] = useState<Data[]>([]);
const [searchTerm, setSearchTerm] = useState(''); const [searchTerm, setSearchTerm] = useState('');
const [isLoading, setIsLoading] = useState(true);
const [paginationStates, setPaginationStates] = useState<PaginationState>({}); const [paginationStates, setPaginationStates] = useState<PaginationState>({});
@@ -212,7 +211,6 @@ export const RunsTable: React.FC<RunsTableProps> = ({
const fetchRuns = useCallback(async () => { const fetchRuns = useCallback(async () => {
try { try {
setIsLoading(true);
const runs = await getStoredRuns(); const runs = await getStoredRuns();
if (runs) { if (runs) {
const parsedRows: Data[] = runs.map((run: any, index: number) => ({ const parsedRows: Data[] = runs.map((run: any, index: number) => ({
@@ -225,8 +223,6 @@ export const RunsTable: React.FC<RunsTableProps> = ({
} }
} catch (error) { } catch (error) {
notify('error', t('runstable.notifications.fetch_error')); notify('error', t('runstable.notifications.fetch_error'));
} finally {
setIsLoading(false);
} }
}, [notify, t]); }, [notify, t]);
@@ -364,14 +360,6 @@ export const RunsTable: React.FC<RunsTableProps> = ({
: <UnfoldMore fontSize="small" />; : <UnfoldMore fontSize="small" />;
}, [accordionSortConfigs]); }, [accordionSortConfigs]);
if (isLoading) {
return (
<Box display="flex" justifyContent="center" alignItems="center" height="50vh">
<CircularProgress />
</Box>
);
}
return ( return (
<React.Fragment> <React.Fragment>
<Box display="flex" justifyContent="space-between" alignItems="center" mb={2}> <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>