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).
This commit is contained in:
@@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user