janpeter/Scrum4Me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(PBI-77): dashboard + settings loading on shadcn Skeleton (T-901)

Browse source 
Replace hand-rolled animate-pulse + bg-border divs with the shadcn <Skeleton>
component for consistent bg-muted color and pulse timing across all five
loading.tsx files. No layout-shift: heights, widths, and rounded radii are
preserved.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-05-10 12:46:11 +02:00
parent 45906ed626
commit 610d8c1707
2 changed files with 12 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/(app)/dashboard/loading.tsx
View file

@ -1,10 +1,12 @@
import { Skeleton } from '@/components/ui/skeleton'
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="p-6 max-w-4xl mx-auto w-full">
<Skeleton className="h-6 w-32 mb-6" />
<div className="grid gap-3">
{[1, 2, 3].map(i => (
<div key={i} className="h-20 bg-border/50 rounded-xl" />
{[1, 2, 3].map((i) => (
<Skeleton key={i} className="h-20 rounded-xl" />
))}
</div>
</div>

10
app/(app)/settings/loading.tsx
View file

@ -1,9 +1,11 @@
import { Skeleton } from '@/components/ui/skeleton'
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 className="p-6 max-w-2xl mx-auto w-full space-y-4">
<Skeleton className="h-6 w-28" />
{[1, 2, 3, 4].map((i) => (
<Skeleton key={i} className="h-28 rounded-xl" />
))}
</div>
)