import { Skeleton } from "@/components/ui/skeleton"
import { BottomNav } from "@/components/bottom-nav"

export default function GenreLoading() {
  return (
    <div className="min-h-screen bg-background pb-24">
      <Skeleton className="h-48 w-full" />
      <div className="mx-auto max-w-md space-y-8 px-4 py-6">
        <div className="grid grid-cols-2 gap-4">
          {Array.from({ length: 4 }).map((_, i) => (
            <Skeleton key={i} className="aspect-square rounded-xl" />
          ))}
        </div>
      </div>
      <BottomNav />
    </div>
  )
}
