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]>

Author: Etsija

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

@@ -31,10 +31,12 @@ import {
 import { ChevronDown, ChevronUp } from 'lucide-react';
 import { useEffect, useMemo } from 'react';
 
-import { useVulnerabilitiesServiceGetApiV1ProductsByProductIdVulnerabilitiesSuspense } from '@/api/queries/suspense';
+import { useVulnerabilitiesServiceGetApiV1ProductsByProductIdVulnerabilities } from '@/api/queries';
 import { ProductVulnerability, VulnerabilityRating } from '@/api/requests';
 import { DataTable } from '@/components/data-table/data-table';
+import { LoadingIndicator } from '@/components/loading-indicator';
 import { MarkdownRenderer } from '@/components/markdown-renderer';
+import { ToastError } from '@/components/toast-error';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -50,6 +52,7 @@ import { updateColumnSorting } from '@/helpers/handle-multisort';
 import { identifierToString } from '@/helpers/identifier-to-string';
 import { compareVulnerabilityRating } from '@/helpers/sorting-functions';
 import { ALL_ITEMS } from '@/lib/constants';
+import { toast } from '@/lib/toast';
 import { vulnerabilityRatingSchema } from '@/schemas';
 
 const defaultPageSize = 10;
@@ -121,13 +124,15 @@ export const ProductVulnerabilityTable = ({
   const search = routeApi.useSearch();
   const navigate = routeApi.useNavigate();
 
-  const { data: vulnerabilities } =
-    useVulnerabilitiesServiceGetApiV1ProductsByProductIdVulnerabilitiesSuspense(
-      {
-        productId: Number.parseInt(params.productId),
-        limit: ALL_ITEMS,
-      }
-    );
+  const {
+    data: vulnerabilities,
+    isPending,
+    isError,
+    error,
+  } = useVulnerabilitiesServiceGetApiV1ProductsByProductIdVulnerabilities({
+    productId: Number.parseInt(params.productId),
+    limit: ALL_ITEMS,
+  });
 
   // Prevent infinite rerenders by providing a stable reference to columns via memoization.
   // https://tanstack.com/table/latest/docs/faq#solution-1-stable-references-with-usememo-or-usestate
@@ -332,6 +337,22 @@ export const ProductVulnerabilityTable = ({
     setFilteredRowCount,
   ]);
 
+  if (isPending) {
+    return <LoadingIndicator />;
+  }
+
+  if (isError) {
+    toast.error('Unable to load data', {
+      description: <ToastError error={error} />,
+      duration: Infinity,
+      cancel: {
+        label: 'Dismiss',
+        onClick: () => {},
+      },
+    });
+    return;
+  }
+
   return (
     <DataTable
       table={table}