spb/fetcha

1import { Skeleton } from "@/components/ui/skeleton";23export default function PlaygroundLoading() {4  return (5    <div aria-busy="true" aria-label="Loading playground">6      <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">7        <div className="grid gap-2">8          <Skeleton className="h-3 w-24" />9          <Skeleton className="h-6 w-40" />10          <Skeleton className="h-3.5 w-[28rem] max-w-full" />11        </div>12        <Skeleton className="h-8 w-32" />13      </div>14      <div className="grid gap-8 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] lg:gap-10">15        <div className="grid gap-4">16          <div className="grid gap-2">17            <Skeleton className="h-3.5 w-10" />18            <div className="grid grid-cols-[6.5rem_minmax(0,1fr)] gap-2">19              <Skeleton className="h-11" />20              <Skeleton className="h-11" />21            </div>22          </div>23          {Array.from({ length: 4 }).map((_, i) => (24            <div key={i} className="border-t border-border py-2.5">25              <Skeleton className="h-3.5 w-28" />26            </div>27          ))}28          <div className="border-t border-border pt-3 grid gap-4">29            <div className="grid gap-4 sm:grid-cols-2">30              <Skeleton className="h-9" />31              <Skeleton className="h-9" />32            </div>33            <div className="grid gap-4 sm:grid-cols-2">34              <Skeleton className="h-9" />35              <Skeleton className="h-9" />36            </div>37            <Skeleton className="h-24" />38          </div>39          <div className="hidden items-center gap-2 border-t border-border pt-4 lg:flex">40            <Skeleton className="h-9 w-40" />41            <Skeleton className="h-9 w-20" />42          </div>43        </div>44        <div className="grid gap-6">45          <Skeleton className="h-40 rounded-lg" />46          <div className="grid gap-3">47            <Skeleton className="h-3 w-36" />48            <Skeleton className="h-8 w-full" />49            <Skeleton className="h-64 rounded-lg" />50          </div>51        </div>52      </div>53    </div>54  );55}56