feat(design): skeleton first loads by shape on the shared reveal clock (E28 S3d2, B8)

frontend/src/design-lab/batchB.tsx

@@ -8,7 +8,6 @@ import {
   Download,
   Home,
   ListVideo,
-  Loader2,
   Lock,
   MessageSquare,
   PlayCircle,
@@ -22,10 +21,12 @@ import {
 import { Btn } from "./batchA";
 import { hexContrast, hueGap } from "../lib/colorMath";
 import { Reference, Sample } from "./labKit";
-import { FADE_ABOVE_PANEL, FADE_BELOW, FADE_BELOW_PANEL, FILLED, H, LAYER } from "./labTokens";
+import { FADE_ABOVE_PANEL, FADE_BELOW, FADE_BELOW_PANEL, LAYER } from "./labTokens";
 import { Chip } from "../components/ui/Chip";
 import { SURFACE } from "../components/ui/surfaces";
 import { SelectTrigger } from "../components/ui/SelectTrigger";
+import { SkeletonShapes } from "../components/ui/Skeleton";
+import { Button } from "../components/ui/Button";
 
 // E28 S2 · Batch B — surfaces, chrome and colour, DECIDED (owner, 2026-09-24): every recommendation,
 // except B7, where the owner combined the soft tint + edge bar with optional labels. B1 (density) and
@@ -358,32 +359,18 @@ function Rail({ lang }: { lang?: "en" | "hu" }) {
 }
 
 // ── B8 · loading ─────────────────────────────────────────────────────────────────────────────────
-const bone = "animate-pulse rounded bg-[color-mix(in_srgb,var(--fg)_10%,transparent)]";
-
 function Loading() {
   return (
     <>
-      <Sample label="A grid, first load: its skeleton (after ~300ms)">
-        <div className="grid max-w-md grid-cols-3 gap-2">
-          {Array.from({ length: 3 }, (_, i) => (
-            <div key={i} className={`${SURFACE.card} flex flex-col gap-1.5 p-1.5`}>
-              <div className={clsx("aspect-video rounded-lg", bone)} />
-              <div className={clsx("h-2 w-4/5", bone)} />
-              <div className={clsx("h-2 w-1/2", bone)} />
-            </div>
-          ))}
-        </div>
-      </Sample>
+      {(["grid", "poster", "list", "table"] as const).map((shape) => (
+        <Sample key={shape} label={`First load, ${shape}: its skeleton (after ~300ms)`}>
+          <div className="max-w-xl">
+            <SkeletonShapes shape={shape} />
+          </div>
+        </Sample>
+      ))}
       <Sample label="A control's own work: its spinner">
-        <span
-          className={clsx(
-            "inline-flex w-fit items-center rounded-lg font-medium opacity-80",
-            FILLED,
-            H.md,
-          )}
-        >
-          <Loader2 className="h-4 w-4 animate-spin" /> Saving
-        </span>
+        <Button loading>Saving</Button>
       </Sample>
     </>
   );