spb/websensor

1import { Skeleton, SkeletonPanel, SkeletonRows } from "@/components/ui";23export default function Loading() {4  return (5    <>6      <div className="mb-3 flex flex-col gap-2">7        <Skeleton className="h-3 w-20" />8        <Skeleton className="h-6 w-24" />9        <Skeleton className="h-3 w-full max-w-2xl" />10      </div>11      <div className="panel mb-4 grid grid-cols-2 divide-x divide-y divide-line sm:grid-cols-3 lg:grid-cols-6 lg:divide-y-0">12        {Array.from({ length: 6 }, (_, i) => (13          <div key={i} className="flex flex-col gap-1.5 px-3 py-2">14            <Skeleton className="h-2.5 w-20" />15            <Skeleton className="h-5 w-12" />16            <Skeleton className="h-2.5 w-16" />17          </div>18        ))}19      </div>20      <div className="grid grid-cols-1 gap-4 xl:grid-cols-[minmax(0,1fr)_340px]">21        <div className="flex flex-col gap-4">22          <div className="panel p-3">23            <Skeleton className="mb-3 h-2.5 w-56" />24            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">25              <Skeleton className="h-16 w-full" />26              <Skeleton className="h-16 w-full" />27            </div>28          </div>29          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">30            {Array.from({ length: 4 }, (_, i) => (31              <div key={i} className="panel">32                <div className="border-b border-line px-3 py-2">33                  <Skeleton className="h-2.5 w-32" />34                </div>35                <SkeletonRows rows={4} />36              </div>37            ))}38          </div>39        </div>40        <aside className="flex flex-col gap-4">41          <SkeletonPanel lines={8} />42          <SkeletonPanel lines={6} />43          <SkeletonPanel lines={6} />44        </aside>45      </div>46    </>47  );48}49