Route-matched boot skeletons

One dispatcher, one skeleton per route: the first paint already looks like the page you asked for.

What this solves

Visual and information. A generic spinner tells the reader nothing about where they landed. Dispatching the boot frame on the URL lets the destination's own icon, title, and static copy paint on the very first frame, so the app already looks like the page asked for before a single byte of real data has come back.

Use it when

Every top-level route during the auth-boot windowwalmart-mvp's routeBootSkeleton(pathname), the dispatcher every route resolves through before its data loads
A record route whose header facts are already known from the URLspeedway's job detail route, where the back link and the file-count subtitle render before the record itself arrives

Rendered

Fixture data; check both themes.

Boot frame for /jobs

Jobs

Every batch you've imported and exactly where it is in the pipeline. Click a row for the stage-by-stage view.

Job	Module	Owner	Status	Started

patterns/boot-skeletons/example.tsxCopy this into a fresh route and it renders as above.

1"use client";
2
3import { Button, Card, PageTitle, TableSkeleton } from "@versable-git/ui";
4import type { TableColumn } from "@versable-git/ui";
5import { useState } from "react";
6import { RecordSkeleton } from "./example-record";
7import { SettingsSkeleton } from "./example-settings";
8
9// Route-matched boot skeletons: the boot frame dispatches on pathname so the
10// first paint mirrors the destination's real layout, never a generic box.
11// The list route is the primary variant, kept inline; the record and
12// settings routes live beside this file since their layouts differ in code,
13// not just in props.
14const jobsColumns: TableColumn<Record<string, never>>[] = [
15  { key: "id", header: "Job" },
16  { key: "module", header: "Module" },
17  { key: "owner", header: "Owner" },
18  { key: "status", header: "Status" },
19  { key: "started", header: "Started" },
20];
21
22function ListSkeleton() {
23  return (
24    <div className="flex flex-col gap-4">
25      <PageTitle
26        Icon="Table"
27        title="Jobs"
28        subtitle="Every batch you've imported and exactly where it is in the pipeline. Click a row for the stage-by-stage view."
29      />
30      <TableSkeleton columns={jobsColumns} rows={4} />
31    </div>
32  );
33}
34
35const ROUTES = [
36  { path: "/jobs", label: "/jobs (list)", Frame: ListSkeleton },
37  { path: "/jobs/job_9421", label: "/jobs/job_9421 (record)", Frame: RecordSkeleton },
38  { path: "/settings", label: "/settings (settings)", Frame: SettingsSkeleton },
39];
40
41export function BootSkeletons() {
42  const [path, setPath] = useState(ROUTES[0]!.path);
43  const route = ROUTES.find((r) => r.path === path) ?? ROUTES[0]!;
44  return (
45    <div className="flex flex-col gap-4">
46      <div className="flex flex-wrap gap-2">
47        {ROUTES.map((r) => (
48          <Button
49            key={r.path}
50            size="sm"
51            variant={r.path === path ? "solid" : "outline"}
52            content={`Boot on ${r.label}`}
53            onClick={() => setPath(r.path)}
54          />
55        ))}
56      </div>
57      <Card title={`Boot frame for ${route.path}`} noAnimate>
58        <route.Frame />
59      </Card>
60    </div>
61  );
62}
63

Where it ships

walmart-mvp/frontend/src/lib/routeSkeletons.tsx:24-35routeBootSkeleton(pathname): every top-level route maps to a skeleton mirroring that page's real static layout

App-specific: The real map covers every top-level route with a hand-built skeleton per page, and the dispatcher runs during the auth boot only; once data loads, the page's own Suspense fallbacks take over.