loading.tsx

import { Card } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";

export default function Loading() {
    return (
        <main className="main-content">
            <div className="flex justify-center">
                <Card className="p-6 w-full">
                    <div className="grid grid-cols-1 ss:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-8">
                        {Array.from({ length: 18 }, (_, i) => i + 1).map((i) => (
                            <Skeleton key={i} className="aspect-[264/374] bg-gray-300" />
                        ))}
                    </div>
                </Card>
            </div>
        </main>
    )
}