Add loading skeletons for shows and songs pages
This commit is contained in:
fullsizemalt
parent
16828b65b0
commit
8a521d307c
4 changed files with 187 additions and 6 deletions
57
frontend/app/shows/[slug]/loading.tsx
Normal file
57
frontend/app/shows/[slug]/loading.tsx
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||||
|
import { Skeleton, SetlistSkeleton } from "@/components/ui/skeleton"
|
||||||
|
|
||||||
|
export default function ShowLoading() {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Skeleton className="h-9 w-9 rounded-md" />
|
||||||
|
<div>
|
||||||
|
<Skeleton className="h-8 w-64" />
|
||||||
|
<Skeleton className="h-4 w-48 mt-2" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-6 md:grid-cols-[2fr_1fr]">
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
{/* Setlist Card */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>
|
||||||
|
<Skeleton className="h-6 w-24" />
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<SetlistSkeleton />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sidebar */}
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<Skeleton className="h-4 w-16" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-2">
|
||||||
|
<Skeleton className="h-5 w-40" />
|
||||||
|
<Skeleton className="h-4 w-32" />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<Skeleton className="h-4 w-24" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Skeleton className="h-10 w-full" />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
23
frontend/app/shows/loading.tsx
Normal file
23
frontend/app/shows/loading.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { Skeleton, ShowCardSkeleton, PageHeaderSkeleton } from "@/components/ui/skeleton"
|
||||||
|
|
||||||
|
export default function ShowsLoading() {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<PageHeaderSkeleton />
|
||||||
|
|
||||||
|
{/* Filters skeleton */}
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Skeleton className="h-10 w-32" />
|
||||||
|
<Skeleton className="h-10 w-40" />
|
||||||
|
<Skeleton className="h-10 flex-1 max-w-xs" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Shows grid */}
|
||||||
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{Array.from({ length: 12 }).map((_, i) => (
|
||||||
|
<ShowCardSkeleton key={i} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
19
frontend/app/songs/loading.tsx
Normal file
19
frontend/app/songs/loading.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
import { Skeleton, SongCardSkeleton, PageHeaderSkeleton } from "@/components/ui/skeleton"
|
||||||
|
|
||||||
|
export default function SongsLoading() {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<PageHeaderSkeleton />
|
||||||
|
|
||||||
|
{/* Search skeleton */}
|
||||||
|
<Skeleton className="h-10 w-full max-w-md" />
|
||||||
|
|
||||||
|
{/* Songs grid */}
|
||||||
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||||
|
{Array.from({ length: 16 }).map((_, i) => (
|
||||||
|
<SongCardSkeleton key={i} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -1,15 +1,97 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
function Skeleton({
|
interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> { }
|
||||||
className,
|
|
||||||
...props
|
export function Skeleton({ className, ...props }: SkeletonProps) {
|
||||||
}: React.HTMLAttributes<HTMLDivElement>) {
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn("animate-pulse rounded-md bg-muted/20 dark:bg-muted/50", className)}
|
className={cn(
|
||||||
|
"animate-pulse rounded-md bg-muted/50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export { Skeleton }
|
// Preset skeleton layouts for common patterns
|
||||||
|
export function ShowCardSkeleton() {
|
||||||
|
return (
|
||||||
|
<div className="rounded-lg border bg-card p-4 space-y-3">
|
||||||
|
<Skeleton className="h-5 w-32" />
|
||||||
|
<Skeleton className="h-4 w-48" />
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Skeleton className="h-6 w-16" />
|
||||||
|
<Skeleton className="h-6 w-20" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SongCardSkeleton() {
|
||||||
|
return (
|
||||||
|
<div className="rounded-lg border bg-card p-4 space-y-3">
|
||||||
|
<Skeleton className="h-5 w-40" />
|
||||||
|
<Skeleton className="h-4 w-24" />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SetlistSkeleton() {
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Set 1 */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Skeleton className="h-4 w-16 mb-4" />
|
||||||
|
{Array.from({ length: 8 }).map((_, i) => (
|
||||||
|
<div key={i} className="flex items-center gap-3">
|
||||||
|
<Skeleton className="h-4 w-6" />
|
||||||
|
<Skeleton className="h-4 w-32" />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{/* Set 2 */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Skeleton className="h-4 w-16 mb-4" />
|
||||||
|
{Array.from({ length: 6 }).map((_, i) => (
|
||||||
|
<div key={i} className="flex items-center gap-3">
|
||||||
|
<Skeleton className="h-4 w-6" />
|
||||||
|
<Skeleton className="h-4 w-36" />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TableSkeleton({ rows = 5, cols = 4 }: { rows?: number; cols?: number }) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex gap-4 pb-2 border-b">
|
||||||
|
{Array.from({ length: cols }).map((_, i) => (
|
||||||
|
<Skeleton key={i} className="h-4 flex-1" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{/* Rows */}
|
||||||
|
{Array.from({ length: rows }).map((_, i) => (
|
||||||
|
<div key={i} className="flex gap-4 py-2">
|
||||||
|
{Array.from({ length: cols }).map((_, j) => (
|
||||||
|
<Skeleton key={j} className="h-4 flex-1" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PageHeaderSkeleton() {
|
||||||
|
return (
|
||||||
|
<div className="space-y-2 mb-6">
|
||||||
|
<Skeleton className="h-8 w-48" />
|
||||||
|
<Skeleton className="h-4 w-72" />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue