From 3ecc57c28e71b2e972dc4303a7348cfc6092cbc3 Mon Sep 17 00:00:00 2001
From: Collin Barrett <6483057+collinbarrett@users.noreply.github.com>
Date: Fri, 20 Jun 2025 18:36:03 -0500
Subject: [PATCH] refactor(web): wrap data table in suspense

---
 web/src/app/loading.tsx                       |  9 +++++
 .../index.tsx}                                |  0
 .../components/filterlist-table/skeleton.tsx  | 33 +++++++++++++++++++
 web/src/components/ui/skeleton.tsx            | 13 ++++++++
 4 files changed, 55 insertions(+)
 create mode 100644 web/src/app/loading.tsx
 rename web/src/components/{filterlist-table.tsx => filterlist-table/index.tsx} (100%)
 create mode 100644 web/src/components/filterlist-table/skeleton.tsx
 create mode 100644 web/src/components/ui/skeleton.tsx

diff --git a/web/src/app/loading.tsx b/web/src/app/loading.tsx
new file mode 100644
index 000000000..e1ddebd9f
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/web/src/components/filterlist-table.tsx b/web/src/components/filterlist-table/index.tsx
similarity index 100%
rename from web/src/components/filterlist-table.tsx
rename to web/src/components/filterlist-table/index.tsx
diff --git a/web/src/components/filterlist-table/skeleton.tsx b/web/src/components/filterlist-table/skeleton.tsx
new file mode 100644
index 000000000..0e8677b02
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/web/src/components/ui/skeleton.tsx b/web/src/components/ui/skeleton.tsx
new file mode 100644
index 000000000..01689981c
--- /dev/null
+++ b/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 };