spb/datacenterindex

1import { Page } from "@/components/ui/card";2import { Skeleton, SkeletonBlock, SkeletonRows } from "@/components/ui/skeleton";34/** Shared skeleton for the intelligence index pages (AI, pulse, power, connectivity, coverage). */5export function IndexLoading({ metrics = 6 }: { metrics?: number }) {6  return (7    <Page className="py-4" aria-busy>8      <Skeleton className="mb-4 h-3 w-40" />9      <Skeleton className="mb-2 h-8 w-72 max-w-full" />10      <Skeleton className="mb-6 h-3.5 w-96 max-w-full" />11      <div className="grid grid-cols-2 gap-4 border-y border-hair py-3 sm:grid-cols-6">12        {Array.from({ length: metrics }).map((_, i) => (13          <div key={i} className="flex flex-col gap-2">14            <Skeleton className="h-7 w-16" />15            <Skeleton className="h-2.5 w-20" />16          </div>17        ))}18      </div>19      <SkeletonBlock className="mt-6 h-24" />20      <div className="mt-6 grid gap-6 md:grid-cols-2">21        <SkeletonRows rows={6} />22        <SkeletonRows rows={6} />23      </div>24      <SkeletonRows rows={10} className="mt-6" />25    </Page>26  );27}28