src/app/datasets/loading.tsx

import {
  Skeleton,
  SkeletonCard,
  SkeletonStats,
} from "@/components/ui/LoadingSkeleton";

/** Route-level skeleton for /datasets and its nested dataset profiles. */
export default function Loading() {
  return (
    <div className="flex flex-col gap-10 md:gap-12" aria-busy="true">
      {/* header */}
      <div className="hairline-b flex flex-col gap-4 pb-6">
        <Skeleton width={140} height={12} />
        <Skeleton width="min(28rem, 80%)" height={36} />
        <Skeleton width="min(40rem, 100%)" height={14} />
        <div className="flex gap-2 pt-2">
          <Skeleton width={88} height={26} />
          <Skeleton width={88} height={26} />
          <Skeleton width={120} height={26} />
        </div>
      </div>

      {/* registry grid */}
      <div className="grid gap-4 md:grid-cols-2">
        <div className="hairline depth-1 flex flex-col gap-5 rounded-sm bg-surface p-6 md:col-span-2 md:p-7">
          <div className="flex gap-2">
            <Skeleton width={56} height={20} />
            <Skeleton width={104} height={20} />
          </div>
          <Skeleton width="min(20rem, 70%)" height={30} />
          <Skeleton width="min(34rem, 95%)" height={14} />
          <SkeletonStats count={3} className="grid-cols-3 max-w-xl" />
          <Skeleton width="100%" height={10} />
        </div>
        <SkeletonCard lines={3} />
        <SkeletonCard lines={3} />
        <div className="md:col-span-2">
          <SkeletonCard lines={2} />
        </div>
      </div>
    </div>
  );
}