refactor(web): wrap data table in suspense

web/src/app/loading.tsx

@@ -0,0 +1,9 @@
+import { FilterListTableSkeleton } from "@/components/filterlist-table/skeleton";
+
+export default function Loading() {
+  return (
+    <main className="pt-4 p-8 gap-16 sm:p-20 sm:pt-8">
+      <FilterListTableSkeleton />
+    </main>
+  );
+}

web/src/components/filterlist-table/skeleton.tsx

@@ -0,0 +1,33 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function FilterListTableSkeleton() {
+  return (
+    <div className="space-y-2">
+      <div className="overflow-x-auto rounded-md border">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead>
+            <tr>
+              <th className="px-4 py-2 text-left font-medium">
+                <Skeleton className="h-6 w-32" />
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {[...Array(10)].map((_, i) => (
+              <tr key={i}>
+                <td className="px-4 py-2">
+                  <Skeleton className="h-5 w-48" />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div className="flex items-center justify-between gap-2 mt-2">
+        <Skeleton className="h-8 w-20" />
+        <Skeleton className="h-6 w-24" />
+        <Skeleton className="h-8 w-20" />
+      </div>
+    </div>
+  );
+}

web/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };