feat(ST-601): add loading skeletons for dashboard, settings and todos
De drie zware split-pane routes hadden al loading.tsx; dashboard, settings en todos kregen elk een passende animate-pulse skeleton. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
0595a2a5d9
commit
02096196ab
3 changed files with 41 additions and 0 deletions
12
app/(app)/dashboard/loading.tsx
Normal file
12
app/(app)/dashboard/loading.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
export default function Loading() {
|
||||
return (
|
||||
<div className="p-6 max-w-4xl mx-auto w-full animate-pulse">
|
||||
<div className="h-6 w-32 bg-border rounded mb-6" />
|
||||
<div className="grid gap-3">
|
||||
{[1, 2, 3].map(i => (
|
||||
<div key={i} className="h-20 bg-border/50 rounded-xl" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
10
app/(app)/settings/loading.tsx
Normal file
10
app/(app)/settings/loading.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
export default function Loading() {
|
||||
return (
|
||||
<div className="p-6 max-w-2xl mx-auto w-full space-y-4 animate-pulse">
|
||||
<div className="h-6 w-28 bg-border rounded" />
|
||||
{[1, 2, 3, 4].map(i => (
|
||||
<div key={i} className="h-28 bg-border/50 rounded-xl" />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
19
app/(app)/todos/loading.tsx
Normal file
19
app/(app)/todos/loading.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
export default function Loading() {
|
||||
return (
|
||||
<div className="p-6 max-w-2xl mx-auto w-full animate-pulse">
|
||||
<div className="h-6 w-20 bg-border rounded mb-6" />
|
||||
<div className="flex gap-3 mb-4">
|
||||
<div className="h-8 w-32 bg-border/50 rounded-lg" />
|
||||
<div className="flex-1" />
|
||||
<div className="h-8 w-8 bg-border/50 rounded-lg" />
|
||||
</div>
|
||||
<div className="rounded-xl border border-border overflow-hidden">
|
||||
<div className="h-10 bg-border/30" />
|
||||
{[1, 2, 3, 4, 5].map(i => (
|
||||
<div key={i} className="h-12 border-t border-border bg-border/20" />
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-4 h-24 bg-border/30 rounded-xl" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue