runfoo-org/elmeg-demo
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add loading skeletons for shows and songs pages

Browse source
This commit is contained in:
fullsizemalt 2025-12-25 21:58:03 -08:00
parent 16828b65b0
commit 8a521d307c
4 changed files with 187 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
frontend/app/shows/[slug]/loading.tsx Normal file
View 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
View 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
View 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>
)
}

94
frontend/components/ui/skeleton.tsx
View file

@ -1,15 +1,97 @@
"use client"
import { cn } from "@/lib/utils"
function Skeleton({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) {
interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> { }
export function Skeleton({ className, ...props }: SkeletonProps) {
return (
<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}
/>
)
}
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>
)
}