From 8a521d307ca0a269924305de3d7e761f23144838 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Thu, 25 Dec 2025 21:58:03 -0800
Subject: [PATCH] Add loading skeletons for shows and songs pages

---
 frontend/app/shows/[slug]/loading.tsx | 57 ++++++++++++++++
 frontend/app/shows/loading.tsx        | 23 +++++++
 frontend/app/songs/loading.tsx        | 19 ++++++
 frontend/components/ui/skeleton.tsx   | 94 +++++++++++++++++++++++++--
 4 files changed, 187 insertions(+), 6 deletions(-)
 create mode 100644 frontend/app/shows/[slug]/loading.tsx
 create mode 100644 frontend/app/shows/loading.tsx
 create mode 100644 frontend/app/songs/loading.tsx

diff --git a/frontend/app/shows/[slug]/loading.tsx b/frontend/app/shows/[slug]/loading.tsx
new file mode 100644
index 0000000..8570fca
--- /dev/null
+++ b/frontend/app/shows/[slug]/loading.tsx
@@ -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>
+    )
+}
diff --git a/frontend/app/shows/loading.tsx b/frontend/app/shows/loading.tsx
new file mode 100644
index 0000000..0a09d0b
--- /dev/null
+++ b/frontend/app/shows/loading.tsx
@@ -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>
+    )
+}
diff --git a/frontend/app/songs/loading.tsx b/frontend/app/songs/loading.tsx
new file mode 100644
index 0000000..9e0bfeb
--- /dev/null
+++ b/frontend/app/songs/loading.tsx
@@ -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>
+    )
+}
diff --git a/frontend/components/ui/skeleton.tsx b/frontend/components/ui/skeleton.tsx
index cbb1704..8811e0f 100644
--- a/frontend/components/ui/skeleton.tsx
+++ b/frontend/components/ui/skeleton.tsx
@@ -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>
+    )
+}