fix: loading skeleton appearing out of order in history table (#1759)

This commit is contained in:
Shuchang Zheng
2025-02-12 03:52:39 +08:00
committed by GitHub
parent 4999d58743
commit 5db9a3890c

View File

@@ -70,78 +70,78 @@ function RunHistory() {
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{isFetching {isFetching ? (
? Array.from({ length: 10 }).map((_, index) => ( Array.from({ length: 10 }).map((_, index) => (
<TableRow key={index}> <TableRow key={index}>
<TableCell colSpan={4}> <TableCell colSpan={4}>
<Skeleton className="h-4 w-full" /> <Skeleton className="h-4 w-full" />
</TableCell> </TableCell>
</TableRow> </TableRow>
)) ))
: null} ) : runs?.length === 0 ? (
{!isFetching && runs?.length === 0 ? (
<TableRow> <TableRow>
<TableCell colSpan={4}> <TableCell colSpan={4}>
<div className="text-center">No runs found</div> <div className="text-center">No runs found</div>
</TableCell> </TableCell>
</TableRow> </TableRow>
) : null} ) : (
{runs?.map((run) => { runs?.map((run) => {
if (isTask(run)) { if (isTask(run)) {
return (
<TableRow
key={run.task_id}
className="cursor-pointer"
onClick={(event) => {
handleNavigate(event, `/tasks/${run.task_id}/actions`);
}}
>
<TableCell>{run.task_id}</TableCell>
<TableCell>{run.url}</TableCell>
<TableCell>
<StatusBadge status={run.status} />
</TableCell>
<TableCell title={basicTimeFormat(run.created_at)}>
{basicLocalTimeFormat(run.created_at)}
</TableCell>
</TableRow>
);
}
return ( return (
<TableRow <TableRow
key={run.task_id} key={run.workflow_run_id}
className="cursor-pointer" className="cursor-pointer"
onClick={(event) => { onClick={(event) => {
handleNavigate(event, `/tasks/${run.task_id}/actions`); handleNavigate(
event,
`/workflows/${run.workflow_permanent_id}/${run.workflow_run_id}/overview`,
);
}} }}
> >
<TableCell>{run.task_id}</TableCell> <TableCell
<TableCell>{run.url}</TableCell> className="max-w-0 truncate"
title={run.workflow_run_id}
>
{run.workflow_run_id}
</TableCell>
<TableCell
className="max-w-0 truncate"
title={run.workflow_title ?? undefined}
>
{run.workflow_title ?? ""}
</TableCell>
<TableCell> <TableCell>
<StatusBadge status={run.status} /> <StatusBadge status={run.status} />
</TableCell> </TableCell>
<TableCell title={basicTimeFormat(run.created_at)}> <TableCell
className="max-w-0 truncate"
title={basicTimeFormat(run.created_at)}
>
{basicLocalTimeFormat(run.created_at)} {basicLocalTimeFormat(run.created_at)}
</TableCell> </TableCell>
</TableRow> </TableRow>
); );
} })
return ( )}
<TableRow
key={run.workflow_run_id}
className="cursor-pointer"
onClick={(event) => {
handleNavigate(
event,
`/workflows/${run.workflow_permanent_id}/${run.workflow_run_id}/overview`,
);
}}
>
<TableCell
className="max-w-0 truncate"
title={run.workflow_run_id}
>
{run.workflow_run_id}
</TableCell>
<TableCell
className="max-w-0 truncate"
title={run.workflow_title ?? undefined}
>
{run.workflow_title ?? ""}
</TableCell>
<TableCell>
<StatusBadge status={run.status} />
</TableCell>
<TableCell
className="max-w-0 truncate"
title={basicTimeFormat(run.created_at)}
>
{basicLocalTimeFormat(run.created_at)}
</TableCell>
</TableRow>
);
})}
</TableBody> </TableBody>
</Table> </Table>
<Pagination className="pt-2"> <Pagination className="pt-2">