import { Skeleton } from "@/components/ui/Skeleton";

// Shown instantly during server-side navigation between dashboard routes,
// before a page's own data fetching (and its own more specific Skeleton
// layout) even mounts. Generic on purpose — every dashboard page shares
// roughly this "header, then a content grid" shape.
export default function Loading() {
  return (
    <div>
      <div className="mb-6 flex items-center justify-between">
        <Skeleton className="h-7 w-40" />
        <Skeleton className="h-9 w-28" />
      </div>
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <Skeleton className="h-24 w-full" />
        <Skeleton className="h-24 w-full" />
        <Skeleton className="h-24 w-full" />
        <Skeleton className="h-24 w-full" />
      </div>
      <Skeleton className="mt-4 h-64 w-full" />
    </div>
  );
}