From c87cb35d871c66d93f1ae0c7fa5e8635da61c2b2 Mon Sep 17 00:00:00 2001
From: Moheeb Zara <hackbuildvideo@gmail.com>
Date: Sun, 17 May 2026 01:24:10 -0700
Subject: [PATCH] feat(ux): content-shaped route skeletons + disable Cancel
 during submit

Per-route loading.tsx for dashboard/members/payments (content-shaped
Skeletons instead of the single global full-page spinner) so heavy
server pages paint structure immediately. Add/Edit member + Log cash
modals now disable Cancel while the submit is in flight (was clickable
mid-insert).
---
 app/(app)/dashboard/loading.tsx        | 33 ++++++++++++++++++++++++++
 app/(app)/members/loading.tsx          | 29 ++++++++++++++++++++++
 app/(app)/members/members-client.tsx   |  4 ++--
 app/(app)/payments/loading.tsx         | 30 +++++++++++++++++++++++
 app/(app)/payments/payments-client.tsx |  2 +-
 5 files changed, 95 insertions(+), 3 deletions(-)
 create mode 100644 app/(app)/dashboard/loading.tsx
 create mode 100644 app/(app)/members/loading.tsx
 create mode 100644 app/(app)/payments/loading.tsx

diff --git a/app/(app)/dashboard/loading.tsx b/app/(app)/dashboard/loading.tsx
new file mode 100644
index 0000000..becefba
--- /dev/null
+++ b/app/(app)/dashboard/loading.tsx
@@ -0,0 +1,33 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function DashboardLoading() {
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="bg-sidebar px-4 md:px-6 py-3">
+        <Skeleton className="h-6 w-32" />
+      </div>
+      <div className="p-4 md:p-6 space-y-6">
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div key={i} className="bg-card rounded border border-border p-4 md:p-5 space-y-3">
+              <Skeleton className="h-3 w-24" />
+              <Skeleton className="h-8 w-16" />
+              <Skeleton className="h-3 w-20" />
+            </div>
+          ))}
+        </div>
+        <div className="grid lg:grid-cols-[1fr_280px] gap-6">
+          <div className="space-y-3">
+            <Skeleton className="h-4 w-40" />
+            <Skeleton className="h-40 w-full rounded border border-border" />
+            <Skeleton className="h-40 w-full rounded border border-border" />
+          </div>
+          <div className="space-y-3">
+            <Skeleton className="h-32 w-full rounded border border-border" />
+            <Skeleton className="h-24 w-full rounded border border-border" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/app/(app)/members/loading.tsx b/app/(app)/members/loading.tsx
new file mode 100644
index 0000000..4e8f36d
--- /dev/null
+++ b/app/(app)/members/loading.tsx
@@ -0,0 +1,29 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function MembersLoading() {
+  return (
+    <>
+      <div className="bg-sidebar px-4 md:px-6 py-3 flex items-center justify-between">
+        <Skeleton className="h-6 w-28" />
+        <Skeleton className="h-8 w-24" />
+      </div>
+      <div className="p-4 md:p-6 space-y-4">
+        <div className="flex gap-2">
+          {Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-8 w-24" />)}
+        </div>
+        <Skeleton className="h-9 w-full max-w-md" />
+        <div className="rounded-lg border border-border divide-y divide-border">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <div key={i} className="px-4 py-3 flex items-center gap-4">
+              <Skeleton className="h-8 w-8 rounded-full" />
+              <Skeleton className="h-4 flex-1 max-w-[40%]" />
+              <Skeleton className="h-4 w-16" />
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="h-7 w-16" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/app/(app)/members/members-client.tsx b/app/(app)/members/members-client.tsx
index aeecf5c..f3ff3ab 100644
--- a/app/(app)/members/members-client.tsx
+++ b/app/(app)/members/members-client.tsx
@@ -493,7 +493,7 @@ export function MembersClient({ members: initialMembers, currentRole, areaLeadRo
             <MemberFormFields />
             {error && <p className="font-mono text-xs text-red-500">{error}</p>}
             <div className="flex gap-3 pt-2">
-              <button type="button" onClick={() => setShowAdd(false)} className="flex-1 border border-border text-foreground font-sans text-sm py-2 rounded hover:border-primary/50 transition">Cancel</button>
+              <button type="button" disabled={loading} onClick={() => setShowAdd(false)} className="flex-1 border border-border text-foreground font-sans text-sm py-2 rounded hover:border-primary/50 transition disabled:opacity-60">Cancel</button>
               <button type="submit" disabled={loading} className="flex-1 bg-primary text-white font-sans text-sm py-2 rounded hover:bg-primary/90 transition disabled:opacity-60">
                 {loading ? 'Adding...' : 'Add Member'}
               </button>
@@ -512,7 +512,7 @@ export function MembersClient({ members: initialMembers, currentRole, areaLeadRo
             <MemberFormFields />
             {error && <p className="font-mono text-xs text-red-500">{error}</p>}
             <div className="flex gap-3 pt-2">
-              <button type="button" onClick={() => setEditMember(null)} className="flex-1 border border-border text-foreground font-sans text-sm py-2 rounded hover:border-primary/50 transition">Cancel</button>
+              <button type="button" disabled={loading} onClick={() => setEditMember(null)} className="flex-1 border border-border text-foreground font-sans text-sm py-2 rounded hover:border-primary/50 transition disabled:opacity-60">Cancel</button>
               <button type="submit" disabled={loading} className="flex-1 bg-primary text-white font-sans text-sm py-2 rounded hover:bg-primary/90 transition disabled:opacity-60">
                 {loading ? 'Saving...' : 'Save Changes'}
               </button>
diff --git a/app/(app)/payments/loading.tsx b/app/(app)/payments/loading.tsx
new file mode 100644
index 0000000..5f755b9
--- /dev/null
+++ b/app/(app)/payments/loading.tsx
@@ -0,0 +1,30 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function PaymentsLoading() {
+  return (
+    <>
+      <div className="bg-sidebar px-4 md:px-6 py-3 flex items-center justify-between">
+        <Skeleton className="h-6 w-28" />
+        <div className="flex gap-2">
+          <Skeleton className="h-8 w-24" />
+          <Skeleton className="h-8 w-24" />
+        </div>
+      </div>
+      <div className="p-4 md:p-6 space-y-4">
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+          {Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-20 w-full rounded border border-border" />)}
+        </div>
+        <div className="rounded-lg border border-border divide-y divide-border">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <div key={i} className="px-4 py-3 flex items-center gap-4">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-4 flex-1 max-w-[30%]" />
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="h-7 w-20" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/app/(app)/payments/payments-client.tsx b/app/(app)/payments/payments-client.tsx
index eb7c6ca..316a67a 100644
--- a/app/(app)/payments/payments-client.tsx
+++ b/app/(app)/payments/payments-client.tsx
@@ -305,7 +305,7 @@ export function PaymentsClient({ payments: initialPayments, members, integration
               </div>
               {error && <p className="font-mono text-xs text-red-500">{error}</p>}
               <div className="flex gap-3 pt-2">
-                <button type="button" onClick={() => setShowLogCash(false)} className="flex-1 border border-border text-foreground font-sans text-sm py-2 rounded hover:border-primary/50 transition">Cancel</button>
+                <button type="button" disabled={loading} onClick={() => setShowLogCash(false)} className="flex-1 border border-border text-foreground font-sans text-sm py-2 rounded hover:border-primary/50 transition disabled:opacity-60">Cancel</button>
                 <button type="submit" disabled={loading} className="flex-1 bg-primary text-white font-sans text-sm py-2 rounded hover:bg-primary/90 transition disabled:opacity-60">
                   {loading ? 'Logging...' : 'Log Payment'}
                 </button>