Madhura68
45906ed626
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>
32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
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>
|
|
)
|
|
}
|