From b837d7654f5712a52bd3b4e2f0928ee49e59f0df Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Sat, 20 Dec 2025 01:00:52 -0800
Subject: [PATCH] style: add skeleton loading and card animations, increase
 shows limit

---
 backend/routers/shows.py            |  2 +-
 frontend/app/shows/page.tsx         | 45 ++++++++++++++++++++++++-----
 frontend/components/ui/skeleton.tsx | 15 ++++++++++
 3 files changed, 53 insertions(+), 9 deletions(-)
 create mode 100644 frontend/components/ui/skeleton.tsx

diff --git a/backend/routers/shows.py b/backend/routers/shows.py
index 38bc785..c7e37bf 100644
--- a/backend/routers/shows.py
+++ b/backend/routers/shows.py
@@ -19,7 +19,7 @@ def create_show(show: ShowCreate, session: Session = Depends(get_session), curre
 @router.get("/", response_model=List[ShowRead])
 def read_shows(
     offset: int = 0, 
-    limit: int = Query(default=100, le=100), 
+    limit: int = Query(default=2000, le=5000), 
     venue_id: int = None,
     tour_id: int = None,
     year: int = None,
diff --git a/frontend/app/shows/page.tsx b/frontend/app/shows/page.tsx
index 0a78d7d..0469391 100644
--- a/frontend/app/shows/page.tsx
+++ b/frontend/app/shows/page.tsx
@@ -5,6 +5,7 @@ import { getApiUrl } from "@/lib/api-config"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import Link from "next/link"
 import { Calendar, MapPin } from "lucide-react"
+import { Skeleton } from "@/components/ui/skeleton"
 
 interface Show {
     id: number
@@ -22,7 +23,7 @@ export default function ShowsPage() {
     const [loading, setLoading] = useState(true)
 
     useEffect(() => {
-        fetch(`${getApiUrl()}/shows/?limit=50`)
+        fetch(`${getApiUrl()}/shows/?limit=2000`)
             .then(res => res.json())
             .then(data => {
                 // Sort by date descending
@@ -35,10 +36,38 @@ export default function ShowsPage() {
             .finally(() => setLoading(false))
     }, [])
 
-    if (loading) return <div className="container py-10">Loading shows...</div>
+    if (loading) {
+        return (
+            <div className="container py-10 space-y-8">
+                <div className="flex flex-col gap-2">
+                    <Skeleton className="h-10 w-48" />
+                    <Skeleton className="h-5 w-96" />
+                </div>
+
+                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                    {Array.from({ length: 12 }).map((_, i) => (
+                        <Card key={i} className="h-full border-muted/40">
+                            <CardHeader>
+                                <div className="flex items-center gap-2">
+                                    <Skeleton className="h-5 w-5 rounded-full" />
+                                    <Skeleton className="h-5 w-3/4" />
+                                </div>
+                            </CardHeader>
+                            <CardContent>
+                                <div className="flex items-center gap-2">
+                                    <Skeleton className="h-4 w-4 rounded-full" />
+                                    <Skeleton className="h-4 w-1/2" />
+                                </div>
+                            </CardContent>
+                        </Card>
+                    ))}
+                </div>
+            </div>
+        )
+    }
 
     return (
-        <div className="container py-10 space-y-8">
+        <div className="container py-10 space-y-8 animate-in fade-in duration-700">
             <div className="flex flex-col gap-2">
                 <h1 className="text-3xl font-bold tracking-tight">Shows</h1>
                 <p className="text-muted-foreground">
@@ -48,11 +77,11 @@ export default function ShowsPage() {
 
             <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                 {shows.map((show) => (
-                    <Link key={show.id} href={`/shows/${show.id}`}>
-                        <Card className="h-full hover:bg-accent/50 transition-colors">
+                    <Link key={show.id} href={`/shows/${show.id}`} className="block group">
+                        <Card className="h-full transition-all duration-300 hover:scale-[1.02] hover:shadow-lg group-hover:border-primary/50">
                             <CardHeader>
-                                <CardTitle className="flex items-center gap-2">
-                                    <Calendar className="h-5 w-5 text-muted-foreground" />
+                                <CardTitle className="flex items-center gap-2 group-hover:text-primary transition-colors">
+                                    <Calendar className="h-5 w-5 text-muted-foreground group-hover:text-primary/70 transition-colors" />
                                     {new Date(show.date).toLocaleDateString(undefined, {
                                         weekday: 'long',
                                         year: 'numeric',
@@ -62,7 +91,7 @@ export default function ShowsPage() {
                                 </CardTitle>
                             </CardHeader>
                             <CardContent>
-                                <div className="flex items-center gap-2 text-muted-foreground">
+                                <div className="flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors">
                                     <MapPin className="h-4 w-4" />
                                     <span>
                                         {show.venue?.name}, {show.venue?.city}, {show.venue?.state}
diff --git a/frontend/components/ui/skeleton.tsx b/frontend/components/ui/skeleton.tsx
new file mode 100644
index 0000000..cbb1704
--- /dev/null
+++ b/frontend/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div
+            className={cn("animate-pulse rounded-md bg-muted/20 dark:bg-muted/50", className)}
+            {...props}
+        />
+    )
+}
+
+export { Skeleton }