src/app/explore/loading.tsx

import { Loader2 } from "lucide-react"

export default function ExploreLoading() {
    return (
        <div className="container mx-auto px-4 py-8 max-w-7xl">
            <div className="mb-8">
                <div className="h-10 w-64 bg-muted rounded-lg animate-pulse mb-3" />
                <div className="h-5 w-96 bg-muted rounded-lg animate-pulse" />
            </div>

            {/* Search/Filter skeleton */}
            <div className="flex gap-3 mb-8">
                <div className="h-10 flex-1 max-w-md bg-muted rounded-xl animate-pulse" />
                <div className="h-10 w-32 bg-muted rounded-xl animate-pulse" />
            </div>

            {/* Grid skeleton */}
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                {Array.from({ length: 6 }).map((_, i) => (
                    <div key={i} className="rounded-xl border border-border p-6 space-y-4">
                        <div className="h-5 w-3/4 bg-muted rounded animate-pulse" />
                        <div className="h-4 w-full bg-muted rounded animate-pulse" />
                        <div className="h-4 w-2/3 bg-muted rounded animate-pulse" />
                        <div className="flex gap-3">
                            <div className="h-8 w-16 bg-muted rounded animate-pulse" />
                            <div className="h-8 w-16 bg-muted rounded animate-pulse" />
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}