Skip to content

Commit 68cc40b

Browse files
Etsijasschuberth
authored andcommitted
feat(ui): Use proper loading state for product vulnerabilities table
Unify vulnerability tables by switching to non-suspended query for product vulnerabilities table and properly handling loading state in the UI. Signed-off-by: Jyrki Keisala <[email protected]>
1 parent f0bf12c commit 68cc40b

File tree

1 file changed

+29
-8
lines changed

1 file changed

+29
-8
lines changed

ui/src/routes/organizations/$orgId/products/$productId/vulnerabilities/-components/product-vulnerability-table.tsx

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,12 @@ import {
3131
import { ChevronDown, ChevronUp } from 'lucide-react';
3232
import { useEffect, useMemo } from 'react';
3333

34-
import { useVulnerabilitiesServiceGetApiV1ProductsByProductIdVulnerabilitiesSuspense } from '@/api/queries/suspense';
34+
import { useVulnerabilitiesServiceGetApiV1ProductsByProductIdVulnerabilities } from '@/api/queries';
3535
import { ProductVulnerability, VulnerabilityRating } from '@/api/requests';
3636
import { DataTable } from '@/components/data-table/data-table';
37+
import { LoadingIndicator } from '@/components/loading-indicator';
3738
import { MarkdownRenderer } from '@/components/markdown-renderer';
39+
import { ToastError } from '@/components/toast-error';
3840
import { Badge } from '@/components/ui/badge';
3941
import { Button } from '@/components/ui/button';
4042
import {
@@ -50,6 +52,7 @@ import { updateColumnSorting } from '@/helpers/handle-multisort';
5052
import { identifierToString } from '@/helpers/identifier-to-string';
5153
import { compareVulnerabilityRating } from '@/helpers/sorting-functions';
5254
import { ALL_ITEMS } from '@/lib/constants';
55+
import { toast } from '@/lib/toast';
5356
import { vulnerabilityRatingSchema } from '@/schemas';
5457

5558
const defaultPageSize = 10;
@@ -121,13 +124,15 @@ export const ProductVulnerabilityTable = ({
121124
const search = routeApi.useSearch();
122125
const navigate = routeApi.useNavigate();
123126

124-
const { data: vulnerabilities } =
125-
useVulnerabilitiesServiceGetApiV1ProductsByProductIdVulnerabilitiesSuspense(
126-
{
127-
productId: Number.parseInt(params.productId),
128-
limit: ALL_ITEMS,
129-
}
130-
);
127+
const {
128+
data: vulnerabilities,
129+
isPending,
130+
isError,
131+
error,
132+
} = useVulnerabilitiesServiceGetApiV1ProductsByProductIdVulnerabilities({
133+
productId: Number.parseInt(params.productId),
134+
limit: ALL_ITEMS,
135+
});
131136

132137
// Prevent infinite rerenders by providing a stable reference to columns via memoization.
133138
// https://tanstack.com/table/latest/docs/faq#solution-1-stable-references-with-usememo-or-usestate
@@ -332,6 +337,22 @@ export const ProductVulnerabilityTable = ({
332337
setFilteredRowCount,
333338
]);
334339

340+
if (isPending) {
341+
return <LoadingIndicator />;
342+
}
343+
344+
if (isError) {
345+
toast.error('Unable to load data', {
346+
description: <ToastError error={error} />,
347+
duration: Infinity,
348+
cancel: {
349+
label: 'Dismiss',
350+
onClick: () => {},
351+
},
352+
});
353+
return;
354+
}
355+
335356
return (
336357
<DataTable
337358
table={table}

0 commit comments

Comments
 (0)