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

style: add skeleton loading and card animations, increase shows limit

Browse source
This commit is contained in:
fullsizemalt 2025-12-20 01:00:52 -08:00
parent 3873ddfe8f
commit b837d7654f
3 changed files with 53 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
backend/routers/shows.py
View file

@ -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,

45
frontend/app/shows/page.tsx
View file

@ -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 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}

15
frontend/components/ui/skeleton.tsx Normal file
View file

@ -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 }