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

refactor(PBI-77): extract BacklogPageSkeleton from 3 identical loadings (T-900)

Browse source 
The loading.tsx files for products/[id], sprint/[sprintId], and
sprint/[sprintId]/planning were 100% identical hand-rolled animate-pulse markup.
Extract the shape into components/loading/backlog-page-skeleton.tsx using the
shadcn <Skeleton> component, and re-export it from the three loading files.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-05-10 11:39:52 +02:00
parent 6bdf927fa3
commit 45906ed626
4 changed files with 35 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

35
app/(app)/products/[id]/loading.tsx
View file

@ -1,34 +1 @@
export default function Loading() {
return (
<div className="flex flex-col h-full animate-pulse">
{/* Header skeleton */}
<div className="px-4 py-3 border-b border-border bg-surface-container-low shrink-0 flex items-center justify-between">
<div className="space-y-1.5">
<div className="h-4 w-32 bg-border rounded" />
<div className="h-3 w-48 bg-border/60 rounded" />
</div>
<div className="h-7 w-24 bg-border rounded" />
</div>
{/* Split pane skeleton */}
<div className="flex-1 flex overflow-hidden">
{/* Left */}
<div className="w-2/5 border-r border-border p-4 space-y-3">
<div className="h-4 w-24 bg-border rounded" />
{[1, 2, 3, 4, 5].map(i => (
<div key={i} className="h-8 bg-border/50 rounded" />
))}
</div>
{/* Right */}
<div className="flex-1 p-4 space-y-3">
<div className="h-4 w-16 bg-border rounded" />
<div className="flex gap-2 flex-wrap">
{[1, 2, 3].map(i => (
<div key={i} className="w-28 h-24 bg-border/50 rounded-lg" />
))}
</div>
</div>
</div>
</div>
)
}
export { default } from '@/components/loading/backlog-page-skeleton'

35
app/(app)/products/[id]/sprint/[sprintId]/loading.tsx
View file

@ -1,34 +1 @@
export default function Loading() {
return (
<div className="flex flex-col h-full animate-pulse">
{/* Header skeleton */}
<div className="px-4 py-3 border-b border-border bg-surface-container-low shrink-0 flex items-center justify-between">
<div className="space-y-1.5">
<div className="h-4 w-32 bg-border rounded" />
<div className="h-3 w-48 bg-border/60 rounded" />
</div>
<div className="h-7 w-24 bg-border rounded" />
</div>
{/* Split pane skeleton */}
<div className="flex-1 flex overflow-hidden">
{/* Left */}
<div className="w-2/5 border-r border-border p-4 space-y-3">
<div className="h-4 w-24 bg-border rounded" />
{[1, 2, 3, 4, 5].map(i => (
<div key={i} className="h-8 bg-border/50 rounded" />
))}
</div>
{/* Right */}
<div className="flex-1 p-4 space-y-3">
<div className="h-4 w-16 bg-border rounded" />
<div className="flex gap-2 flex-wrap">
{[1, 2, 3].map(i => (
<div key={i} className="w-28 h-24 bg-border/50 rounded-lg" />
))}
</div>
</div>
</div>
</div>
)
}
export { default } from '@/components/loading/backlog-page-skeleton'

35
app/(app)/products/[id]/sprint/[sprintId]/planning/loading.tsx
View file

@ -1,34 +1 @@
export default function Loading() {
return (
<div className="flex flex-col h-full animate-pulse">
{/* Header skeleton */}
<div className="px-4 py-3 border-b border-border bg-surface-container-low shrink-0 flex items-center justify-between">
<div className="space-y-1.5">
<div className="h-4 w-32 bg-border rounded" />
<div className="h-3 w-48 bg-border/60 rounded" />
</div>
<div className="h-7 w-24 bg-border rounded" />
</div>
{/* Split pane skeleton */}
<div className="flex-1 flex overflow-hidden">
{/* Left */}
<div className="w-2/5 border-r border-border p-4 space-y-3">
<div className="h-4 w-24 bg-border rounded" />
{[1, 2, 3, 4, 5].map(i => (
<div key={i} className="h-8 bg-border/50 rounded" />
))}
</div>
{/* Right */}
<div className="flex-1 p-4 space-y-3">
<div className="h-4 w-16 bg-border rounded" />
<div className="flex gap-2 flex-wrap">
{[1, 2, 3].map(i => (
<div key={i} className="w-28 h-24 bg-border/50 rounded-lg" />
))}
</div>
</div>
</div>
</div>
)
}
export { default } from '@/components/loading/backlog-page-skeleton'

32
components/loading/backlog-page-skeleton.tsx Normal file
View file

@ -0,0 +1,32 @@
import { Skeleton } from '@/components/ui/skeleton'
export default function BacklogPageSkeleton() {
return (
<div className="flex flex-col h-full">
<div className="px-4 py-3 border-b border-border bg-surface-container-low shrink-0 flex items-center justify-between">
<div className="space-y-1.5">
<Skeleton className="h-4 w-32" />
<Skeleton className="h-3 w-48" />
</div>
<Skeleton className="h-7 w-24" />
</div>
<div className="flex-1 flex overflow-hidden">
<div className="w-2/5 border-r border-border p-4 space-y-3">
<Skeleton className="h-4 w-24" />
{[1, 2, 3, 4, 5].map((i) => (
<Skeleton key={i} className="h-8 w-full" />
))}
</div>
<div className="flex-1 p-4 space-y-3">
<Skeleton className="h-4 w-16" />
<div className="flex gap-2 flex-wrap">
{[1, 2, 3].map((i) => (
<Skeleton key={i} className="w-28 h-24 rounded-lg" />
))}
</div>
</div>
</div>
</div>
)
}