From 8bf52e3583ab27124481f5d08015aa194595785d Mon Sep 17 00:00:00 2001
From: Adam Eivy <atomantic@gmail.com>
Date: Wed, 2 Sep 2026 04:49:41 +0000
Subject: [PATCH] fix: convert 24 pages to PageSkeleton so first paint stops
 reflowing (#5659)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two dozen pages returned a bare sentence or a centered spinner from their
top-level `if (loading)` branch, across five inconsistent idioms. Because
those branches dropped the page's own header and tab strip, the entire
above-the-fold region appeared at once when data arrived and shoved the
viewport down — on a 360x640 phone that reflow is the whole visible screen.

Each page now renders the shared `PageSkeleton` with the axes that match its
loaded shape (`header`, `layout`, `tabs`, `padded`, `fullHeight`), and each
call carries a specific screen-reader label rather than the bare default, so
the busy region says what is loading. Pages whose header is already painted
(AI Providers, Prompt Manager, Insights overview, Workspace Contexts) keep
rendering it and reserve only the body with `header="none"`.

Insights' local `SummaryCardSkeleton` copy is gone in favour of the shared
primitive; Models' `<PageSkeleton />` Suspense fallback picks up a real
label. `BrailleSpinner` stays for inline busy states inside buttons and cards.

Tests: a new `client/src/pages/loadingSkeletons.test.jsx` mounts all 24 pages
with their fetch still in flight and asserts each announces an `aria-busy`
status region with its own label, plus a tree-wide source guard that fails
when any page's top-level loading branch stops rendering `PageSkeleton` or
ships the default label. `PageSkeleton.test.jsx` gains the newly used prop
combinations (`header="bar"` + `fullHeight`, `layout="grid"` + `header="none"`).

Claude-Session: https://claude.ai/code/session_01DxNA8g7B5hZd4uswfUM1xn
---
 .../src/components/ui/PageSkeleton.test.jsx   |  23 +++
 client/src/pages/AIProviders.jsx              |   5 +-
 client/src/pages/AgentsPage.jsx               |  11 +-
 client/src/pages/BrainScanReport.jsx          |  10 +-
 client/src/pages/CatalogIngredient.jsx        |  12 +-
 client/src/pages/CreativeDirector.jsx         |  16 +-
 client/src/pages/Game.jsx                     |  28 ++-
 client/src/pages/Insights.jsx                 |  24 +--
 client/src/pages/Instances.jsx                |  13 +-
 client/src/pages/Media3DDetail.jsx            |  11 +-
 client/src/pages/Models.jsx                   |   2 +-
 client/src/pages/PipelineContinuityBible.jsx  |  14 +-
 client/src/pages/PipelineExport.jsx           |  15 +-
 client/src/pages/PipelineIssue.jsx            |  19 +-
 client/src/pages/PipelineManuscriptEditor.jsx |  15 +-
 client/src/pages/PipelineReverseOutline.jsx   |  14 +-
 client/src/pages/PipelineSeries.jsx           |  17 +-
 client/src/pages/PipelineSeriesRoadmap.jsx    |  16 +-
 client/src/pages/PipelineVoiceFingerprint.jsx |  16 +-
 client/src/pages/PromptManager.jsx            |   6 +-
 client/src/pages/QuotaBurn.jsx                |  15 +-
 client/src/pages/QuotaBurn.test.jsx           |   4 +-
 client/src/pages/RoundEditor.jsx              |  16 +-
 client/src/pages/RoundEditor.test.jsx         |   5 +-
 client/src/pages/SongBookViewer.jsx           |  15 +-
 client/src/pages/Templates.jsx                |  13 +-
 client/src/pages/VideoTimelineEditor.jsx      |  13 +-
 client/src/pages/WorkspaceContexts.jsx        |  14 +-
 client/src/pages/loadingSkeletons.test.jsx    | 174 ++++++++++++++++++
 29 files changed, 488 insertions(+), 68 deletions(-)
 create mode 100644 client/src/pages/loadingSkeletons.test.jsx

diff --git a/client/src/components/ui/PageSkeleton.test.jsx b/client/src/components/ui/PageSkeleton.test.jsx
index a8652c96bc..25f2e59f57 100644
--- a/client/src/components/ui/PageSkeleton.test.jsx
+++ b/client/src/components/ui/PageSkeleton.test.jsx
@@ -88,6 +88,29 @@ describe('PageSkeleton', () => {
     expect(container.innerHTML).not.toContain('px-3 py-2 sm:px-4 sm:py-3');
   });
 
+  it('owns the height on a fullHeight bar page and gives the body the scroll', () => {
+    // The bar branch keeps the shell `h-full` and puts `overflow-y-auto` on the
+    // BODY, not the root — a full-bleed page's header bar must not scroll away.
+    const { container } = render(<PageSkeleton header="bar" fullHeight padded bodyClassName="p-4" />);
+    expect(status().className).toContain('h-full');
+    expect(status().className).not.toContain('overflow-y-auto');
+    const bodyRegion = container.querySelector('.flex-1.min-h-0');
+    expect(bodyRegion.className).toContain('overflow-y-auto');
+    expect(bodyRegion.className).toContain('p-4');
+  });
+
+  it('reserves a card grid under a page-supplied header for layout="grid" + header="none"', () => {
+    const { container } = render(
+      <PageSkeleton header="none" layout="grid" gridColsClass="lg:grid-cols-3" cards={3} />
+    );
+    // No title/action placeholders — the page already painted its own chrome.
+    expect(cardCount(container)).toBe(3);
+    expect(container.innerHTML).toContain('lg:grid-cols-3');
+    expect(container.innerHTML).not.toContain('lg:grid-cols-[1fr_360px]');
+    // 3 cards x (1 title + 2 body lines) and nothing else.
+    expect(container.querySelectorAll('.animate-pulse')).toHaveLength(9);
+  });
+
   it('omits body padding on a full-bleed tab even in bar mode', () => {
     const { container } = render(<PageSkeleton header="bar" padded={false} bodyClassName="p-4" />);
     const bodyRegion = container.querySelector('.flex-1.min-h-0');
diff --git a/client/src/pages/AIProviders.jsx b/client/src/pages/AIProviders.jsx
index ee27d8d08f..e3dc4a953e 100644
--- a/client/src/pages/AIProviders.jsx
+++ b/client/src/pages/AIProviders.jsx
@@ -21,6 +21,7 @@ import {
 } from '../utils/formatters';
 import SettingsTabsHeader from '../components/settings/SettingsTabsHeader';
 import PageHeader from '../components/PageHeader';
+import PageSkeleton from '../components/ui/PageSkeleton';
 import OverflowMenu from '../components/ui/OverflowMenu';
 import EffortSelect from '../components/cos/EffortSelect';
 import Drawer from '../components/Drawer';
@@ -692,8 +693,8 @@ export default function AIProviders() {
       <div className="flex flex-col h-full">
         <PageHeader icon={Bot} title="AI Providers" />
         <SettingsTabsHeader activeTab="providers" />
-        <div className="flex-1 flex items-center justify-center">
-          <div className="text-gray-400">Loading providers...</div>
+        <div className="flex-1 overflow-auto p-4">
+          <PageSkeleton header="none" label="Loading providers" layout="grid" cards={4} />
         </div>
       </div>
     );
diff --git a/client/src/pages/AgentsPage.jsx b/client/src/pages/AgentsPage.jsx
index 9e9b1c9bd1..736902da84 100644
--- a/client/src/pages/AgentsPage.jsx
+++ b/client/src/pages/AgentsPage.jsx
@@ -3,6 +3,7 @@ import { RefreshCw, Activity, XCircle, Cpu, MemoryStick, Terminal } from 'lucide
 import * as api from '../services/api';
 import { useAutoRefetch } from '../hooks/useAutoRefetch';
 import { formatDateTime } from '../utils/formatters';
+import PageSkeleton from '../components/ui/PageSkeleton';
 
 export function AgentsPage() {
   const [killing, setKilling] = useState({});
@@ -32,7 +33,15 @@ export function AgentsPage() {
   const totalMemory = agents.reduce((sum, a) => sum + (a.memory || 0), 0);
 
   if (loading) {
-    return <div className="text-center py-8 text-gray-400">Scanning for AI agents...</div>;
+    return (
+      <PageSkeleton
+        label="Scanning for AI agents"
+        headerRowClass="flex flex-col sm:flex-row sm:items-center justify-between gap-3"
+        titleWidthClass="w-56"
+        cards={3}
+        sidebar={false}
+      />
+    );
   }
 
   return (
diff --git a/client/src/pages/BrainScanReport.jsx b/client/src/pages/BrainScanReport.jsx
index 03fa3327d6..b0f34a920c 100644
--- a/client/src/pages/BrainScanReport.jsx
+++ b/client/src/pages/BrainScanReport.jsx
@@ -3,7 +3,7 @@ import { Link, useParams } from 'react-router';
 import { ArrowLeft, FileText, RefreshCw, ShieldAlert, ShieldCheck, Skull } from 'lucide-react';
 import * as api from '../services/api';
 import MarkdownOutput from '../components/cos/MarkdownOutput';
-import BrailleSpinner from '../components/BrailleSpinner';
+import PageSkeleton from '../components/ui/PageSkeleton';
 import { useAutoRefetch } from '../hooks/useAutoRefetch';
 
 const VERDICT_STYLES = {
@@ -36,7 +36,13 @@ export default function BrainScanReport() {
   if (loading) {
     return (
       <Shell>
-        <div className="flex justify-center py-16"><BrailleSpinner text="Loading scan report" /></div>
+        <PageSkeleton
+          label="Loading scan report"
+          headerRowClass="flex flex-wrap items-start justify-between gap-3"
+          titleWidthClass="w-64"
+          cards={1}
+          sidebar={false}
+        />
       </Shell>
     );
   }
diff --git a/client/src/pages/CatalogIngredient.jsx b/client/src/pages/CatalogIngredient.jsx
index 533eae119f..4190bd5344 100644
--- a/client/src/pages/CatalogIngredient.jsx
+++ b/client/src/pages/CatalogIngredient.jsx
@@ -14,6 +14,7 @@ import Modal from '../components/ui/Modal.jsx';
 import ConfirmButtonPair from '../components/ui/ConfirmButtonPair.jsx';
 import UnsavedChangesConfirm from '../components/ui/UnsavedChangesConfirm.jsx';
 import AutoSizeTextarea from '../components/ui/AutoSizeTextarea';
+import PageSkeleton from '../components/ui/PageSkeleton';
 import {
   getCatalogIngredientDetails,
   updateCatalogIngredient,
@@ -420,9 +421,14 @@ export default function CatalogIngredient() {
 
   if (loading || !record) {
     return (
-      <section className="h-full overflow-y-auto p-4 md:p-6">
-        <div className="max-w-4xl mx-auto text-sm text-gray-400">Loading ingredient…</div>
-      </section>
+      <PageSkeleton
+        header="none"
+        label="Loading ingredient"
+        padded
+        fullHeight
+        cards={3}
+        sidebar={false}
+      />
     );
   }
 
diff --git a/client/src/pages/CreativeDirector.jsx b/client/src/pages/CreativeDirector.jsx
index b627f9ebee..d1b8fd555c 100644
--- a/client/src/pages/CreativeDirector.jsx
+++ b/client/src/pages/CreativeDirector.jsx
@@ -18,6 +18,7 @@ import { listUniverses } from '../services/apiUniverseBuilder.js';
 import { listPipelineSeries } from '../services/apiPipeline.js';
 import ModelSelect from '../components/ModelSelect';
 import PageHeader from '../components/PageHeader';
+import PageSkeleton from '../components/ui/PageSkeleton';
 import Drawer from '../components/Drawer';
 import DirectiveComposer from '../components/creative-director/DirectiveComposer.jsx';
 import CreativeDirectorModelsDrawer from '../components/creative-director/CreativeDirectorModelsDrawer.jsx';
@@ -259,7 +260,20 @@ export default function CreativeDirector() {
   };
 
   if (loading) {
-    return <div className="p-6 text-port-text-muted">Loading projects…</div>;
+    return (
+      <PageSkeleton
+        header="bar"
+        label="Loading Creative Director projects"
+        fullHeight
+        padded
+        showSubtitle
+        titleWidthClass="w-56"
+        layout="grid"
+        gridColsClass="md:grid-cols-2 lg:grid-cols-3"
+        cards={6}
+        bodyClassName="p-6"
+      />
+    );
   }
 
   return (
diff --git a/client/src/pages/Game.jsx b/client/src/pages/Game.jsx
index 03f88f2186..a74f20cfec 100644
--- a/client/src/pages/Game.jsx
+++ b/client/src/pages/Game.jsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ArrowLeft, Boxes, Gamepad2, Images, MessageSquare, Plus } from 'lucide-react';
 import { Link, useNavigate, useParams } from 'react-router';
+import PageSkeleton from '../components/ui/PageSkeleton';
 import toast from '../components/ui/Toast';
 import AppContextPicker from '../components/AppContextPicker.jsx';
 import GameBindings from '../components/games/GameBindings.jsx';
@@ -259,7 +260,32 @@ export default function Game() {
   };
 
   if (loading) {
-    return <div className="py-12 text-center text-sm text-gray-400">Loading Game studio…</div>;
+    // The detail workspace is a full-bleed h-full shell with its own bordered
+    // bar; the index is a plain padded page. `id` is known before the fetch
+    // settles, so each reserves the chrome its own loaded state renders.
+    return id ? (
+      <PageSkeleton
+        header="bar"
+        label="Loading Game workspace"
+        fullHeight
+        padded
+        barClassName="px-4 py-3"
+        bodyClassName="p-4"
+        headerRowClass="flex flex-col justify-between gap-2 sm:flex-row sm:items-center"
+        titleWidthClass="w-48"
+        cards={3}
+        sidebar={false}
+      />
+    ) : (
+      <PageSkeleton
+        label="Loading Game studio"
+        titleWidthClass="w-32"
+        showSubtitle
+        showAction={false}
+        cards={3}
+        sidebar={false}
+      />
+    );
   }
 
   if (id && !game) {
diff --git a/client/src/pages/Insights.jsx b/client/src/pages/Insights.jsx
index 32c9bfa5b2..bedb7fbd32 100644
--- a/client/src/pages/Insights.jsx
+++ b/client/src/pages/Insights.jsx
@@ -17,6 +17,7 @@ import GoalScorecardTab from '../components/insights/GoalScorecardTab';
 import ConfidenceBadge from '../components/insights/ConfidenceBadge';
 import PageHeader from '../components/PageHeader';
 import TabPills from '../components/ui/TabPills';
+import PageSkeleton from '../components/ui/PageSkeleton';
 import { timeAgo } from '../utils/formatters';
 
 // Exported for the nav-manifest tab-coverage guard (server/lib/navManifest.test.js).
@@ -28,17 +29,6 @@ export const TABS = [
   { id: 'goal-scorecard', label: 'Goal Scorecard', icon: Target }
 ];
 
-function SummaryCardSkeleton() {
-  return (
-    <div className="bg-port-card border border-port-border rounded-lg p-6 animate-pulse">
-      <div className="h-5 bg-gray-700 rounded w-2/3 mb-3" />
-      <div className="h-8 bg-gray-800 rounded w-1/2 mb-2" />
-      <div className="h-3 bg-gray-800 rounded w-full mb-1" />
-      <div className="h-3 bg-gray-800 rounded w-4/5" />
-    </div>
-  );
-}
-
 export function OverviewTab() {
   const navigate = useNavigate();
   const [loading, setLoading] = useState(true);
@@ -72,11 +62,13 @@ export function OverviewTab() {
 
   if (loading) {
     return (
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
-        <SummaryCardSkeleton />
-        <SummaryCardSkeleton />
-        <SummaryCardSkeleton />
-      </div>
+      <PageSkeleton
+        header="none"
+        label="Loading insights overview"
+        layout="grid"
+        gridColsClass="lg:grid-cols-3"
+        cards={3}
+      />
     );
   }
 
diff --git a/client/src/pages/Instances.jsx b/client/src/pages/Instances.jsx
index dc9a7e4635..31f7543e43 100644
--- a/client/src/pages/Instances.jsx
+++ b/client/src/pages/Instances.jsx
@@ -30,6 +30,7 @@ import BrainParitySchedule from '../components/instances/BrainParitySchedule';
 import TailnetHelpBanner from '../components/instances/TailnetHelpBanner';
 import { timeAgo, timeUntil } from '../utils/formatters';
 import { directionalCounts, describeDirectional } from '../lib/syncCounts';
+import PageSkeleton from '../components/ui/PageSkeleton';
 
 const STATUS_COLORS = {
   online: 'text-port-success',
@@ -1295,9 +1296,15 @@ export default function Instances() {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center h-64">
-        <div className="text-gray-500">Loading instances...</div>
-      </div>
+      <PageSkeleton
+        label="Loading instances"
+        headerRowClass="flex items-center gap-3"
+        titleWidthClass="w-40"
+        showAction={false}
+        layout="grid"
+        gridColsClass="md:grid-cols-2"
+        cards={4}
+      />
     );
   }
 
diff --git a/client/src/pages/Media3DDetail.jsx b/client/src/pages/Media3DDetail.jsx
index 773ca299fd..0b08c0cea2 100644
--- a/client/src/pages/Media3DDetail.jsx
+++ b/client/src/pages/Media3DDetail.jsx
@@ -12,6 +12,7 @@ import ImageTo3dRenderOptions from '../components/media/ImageTo3dRenderOptions';
 import { fieldsFromRun, renderOptionsBody, runWantsTransparency } from '../lib/imageTo3dRenderOptions';
 import { imageTo3dStatusMeta } from '../components/media/imageTo3dStatus';
 import toast from '../components/ui/Toast';
+import PageSkeleton from '../components/ui/PageSkeleton';
 
 // Poll cadence while a render is in flight (a real TRELLIS.2 render is multi-minute).
 const POLL_INTERVAL_MS = 2500;
@@ -107,8 +108,14 @@ export default function Media3DDetail() {
 
   if (loading) {
     return (
-      <div className="mx-auto flex max-w-4xl items-center gap-2 py-16 text-sm text-gray-400">
-        <Loader2 className="h-4 w-4 animate-spin" /> Loading 3D model…
+      <div className="mx-auto max-w-4xl">
+        <PageSkeleton
+          label="Loading 3D model"
+          headerRowClass="flex flex-wrap items-center justify-between gap-3"
+          titleWidthClass="w-56"
+          cards={2}
+          sidebar={false}
+        />
       </div>
     );
   }
diff --git a/client/src/pages/Models.jsx b/client/src/pages/Models.jsx
index 56b3db8a76..6a3ae19cd1 100644
--- a/client/src/pages/Models.jsx
+++ b/client/src/pages/Models.jsx
@@ -96,7 +96,7 @@ export default function Models() {
       <div className="flex-1 min-w-0 overflow-auto p-4">
         {/* Local boundary rather than the App-level one: a lazy tab must not blank
             out the section header and tab bar while its chunk loads. */}
-        <Suspense fallback={<PageSkeleton />}>
+        <Suspense fallback={<PageSkeleton header="none" label="Loading models section" cards={3} sidebar={false} />}>
           {DetailContent ? <DetailContent recordId={recordId} /> : <TabContent view={recordId} />}
         </Suspense>
       </div>
diff --git a/client/src/pages/PipelineContinuityBible.jsx b/client/src/pages/PipelineContinuityBible.jsx
index 350361d1d1..6dfee6980d 100644
--- a/client/src/pages/PipelineContinuityBible.jsx
+++ b/client/src/pages/PipelineContinuityBible.jsx
@@ -14,6 +14,7 @@ import { useEffect, useRef, useState } from 'react';
 import { Link, useParams, useNavigate } from 'react-router';
 import { Loader2, RefreshCw, X, ArrowLeft, BookOpen, AlertTriangle, BookMarked, Lock } from 'lucide-react';
 import toast from '../components/ui/Toast';
+import PageSkeleton from '../components/ui/PageSkeleton';
 import {
   getPipelineSeries,
   getContinuityBible,
@@ -112,9 +113,16 @@ export default function PipelineContinuityBible() {
 
   if (loading) {
     return (
-      <div className="h-full flex items-center justify-center text-gray-400">
-        <Loader2 className="animate-spin" size={20} />
-      </div>
+      <PageSkeleton
+        label="Loading series continuity"
+        fullHeight
+        padded
+        headerRowClass="flex flex-wrap items-center gap-2"
+        titleWidthClass="w-56"
+        showAction={false}
+        cards={4}
+        sidebar={false}
+      />
     );
   }
 
diff --git a/client/src/pages/PipelineExport.jsx b/client/src/pages/PipelineExport.jsx
index 75440ccc64..ccf7f5e5e0 100644
--- a/client/src/pages/PipelineExport.jsx
+++ b/client/src/pages/PipelineExport.jsx
@@ -14,6 +14,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { Link, useParams, useNavigate } from 'react-router';
 import { Loader2, ArrowLeft, Download, Save, BookText, FileText, FileType } from 'lucide-react';
 import toast from '../components/ui/Toast';
+import PageSkeleton from '../components/ui/PageSkeleton';
 import {
   getPipelineSeries,
   updatePipelineSeries,
@@ -109,9 +110,17 @@ export default function PipelineExport() {
 
   if (loading) {
     return (
-      <div className="h-full flex items-center justify-center text-gray-400">
-        <Loader2 className="animate-spin" size={20} />
-      </div>
+      <PageSkeleton
+        label="Loading export options"
+        fullHeight
+        padded
+        headerRowClass="flex flex-wrap items-center gap-2"
+        titleWidthClass="w-56"
+        showAction={false}
+        layout="grid"
+        gridColsClass="lg:grid-cols-2"
+        cards={2}
+      />
     );
   }
 
diff --git a/client/src/pages/PipelineIssue.jsx b/client/src/pages/PipelineIssue.jsx
index d5a9ec3fa8..a3f83feb58 100644
--- a/client/src/pages/PipelineIssue.jsx
+++ b/client/src/pages/PipelineIssue.jsx
@@ -13,6 +13,7 @@ import {
   LayoutGrid, Image as ImageIcon, Clapperboard, Users, Settings, Mic, Lock, Unlock,
 } from 'lucide-react';
 import toast from '../components/ui/Toast';
+import PageSkeleton from '../components/ui/PageSkeleton';
 import Modal from '../components/ui/Modal';
 import TabPills from '../components/ui/TabPills';
 import {
@@ -287,7 +288,23 @@ export default function PipelineIssue() {
     ? `${PIPELINE_STAGE_LABELS[stageId]} stage is locked — unlock it to regenerate`
     : ambientLockHint;
 
-  if (loading) return <div className="p-6 text-gray-500 text-sm">Loading issue…</div>;
+  if (loading) {
+    return (
+      <PageSkeleton
+        header="bar"
+        label="Loading pipeline issue"
+        fullHeight
+        padded
+        barClassName="p-4 md:p-6"
+        bodyClassName="p-4 md:p-6"
+        headerRowClass="flex items-center justify-between gap-3 flex-wrap"
+        titleWidthClass="w-64"
+        tabs={stageTabs.length}
+        cards={2}
+        sidebar={false}
+      />
+    );
+  }
   if (!issue) return null;
 
   const StageComponent = STAGE_COMPONENTS[stageId];
diff --git a/client/src/pages/PipelineManuscriptEditor.jsx b/client/src/pages/PipelineManuscriptEditor.jsx
index 07ad386d07..55d3bd8531 100644
--- a/client/src/pages/PipelineManuscriptEditor.jsx
+++ b/client/src/pages/PipelineManuscriptEditor.jsx
@@ -34,6 +34,7 @@ import {
 } from 'lucide-react';
 import { formatManuscript } from '../lib/manuscriptFormat';
 import toast from '../components/ui/Toast';
+import PageSkeleton from '../components/ui/PageSkeleton';
 import UnsavedChangesConfirm from '../components/ui/UnsavedChangesConfirm';
 import { useAsyncAction } from '../hooks/useAsyncAction';
 import { usePipelineProgress } from '../hooks/usePipelineProgress';
@@ -733,7 +734,19 @@ export default function PipelineManuscriptEditor() {
     else sectionRefs.current.delete(number);
   };
 
-  if (loading) return <div className="p-6 text-gray-500 text-sm">Loading manuscript…</div>;
+  if (loading) {
+    return (
+      <PageSkeleton
+        label="Loading manuscript"
+        fullHeight
+        padded
+        headerRowClass="flex items-center gap-3 flex-wrap"
+        titleWidthClass="w-56"
+        showAction={false}
+        cards={3}
+      />
+    );
+  }
 
   return (
     // The full-bleed route removes Layout's default scroll container. The
diff --git a/client/src/pages/PipelineReverseOutline.jsx b/client/src/pages/PipelineReverseOutline.jsx
index 98f53ec0ca..8234a68c85 100644
--- a/client/src/pages/PipelineReverseOutline.jsx
+++ b/client/src/pages/PipelineReverseOutline.jsx
@@ -12,6 +12,7 @@ import { useEffect, useRef, useState } from 'react';
 import { Link, useParams, useNavigate } from 'react-router';
 import { Loader2, RefreshCw, X, ArrowLeft, BookOpen, AlertTriangle, Compass } from 'lucide-react';
 import toast from '../components/ui/Toast';
+import PageSkeleton from '../components/ui/PageSkeleton';
 import {
   getPipelineSeries,
   getReverseOutline,
@@ -104,9 +105,16 @@ export default function PipelineReverseOutline() {
 
   if (loading) {
     return (
-      <div className="h-full flex items-center justify-center text-gray-400">
-        <Loader2 className="animate-spin" size={20} />
-      </div>
+      <PageSkeleton
+        label="Loading reverse outline"
+        fullHeight
+        padded
+        headerRowClass="flex flex-wrap items-center gap-2"
+        titleWidthClass="w-56"
+        showAction={false}
+        cards={3}
+        sidebar={false}
+      />
     );
   }
 
diff --git a/client/src/pages/PipelineSeries.jsx b/client/src/pages/PipelineSeries.jsx
index d7633958ef..249087b9fe 100644
--- a/client/src/pages/PipelineSeries.jsx
+++ b/client/src/pages/PipelineSeries.jsx
@@ -18,6 +18,7 @@ import {
   Fingerprint, Plus, Trash2, Wand2, Check, X, Download,
 } from 'lucide-react';
 import toast from '../components/ui/Toast';
+import PageSkeleton from '../components/ui/PageSkeleton';
 import ArcCanvas from '../components/pipeline/ArcCanvas';
 import AutopilotPanel from '../components/pipeline/AutopilotPanel';
 import SeriesReviewPanel from '../components/pipeline/SeriesReviewPanel';
@@ -165,7 +166,21 @@ export default function PipelineSeries() {
     if (didSave) toast.success('Series saved');
   };
 
-  if (loading) return <div className="p-6 text-gray-500 text-sm">Loading series…</div>;
+  if (loading) {
+    return (
+      <PageSkeleton
+        layout="split"
+        label="Loading series"
+        fullHeight
+        padded
+        bodyClassName="p-4"
+        sideCollapsed={sidebarCollapsed}
+        splitColsClass={sidebarCollapsed ? 'lg:grid-cols-[0px_1fr]' : 'lg:grid-cols-[360px_1fr]'}
+        sideClassName="flex flex-col gap-3 border-b lg:border-b-0 lg:border-r border-port-border bg-port-card/40 p-3 lg:p-4 lg:h-full lg:overflow-hidden"
+        cards={3}
+      />
+    );
+  }
   if (!series) return null;
 
   // Mobile = flex column (grid template ignored); lg+ = grid where the inline
diff --git a/client/src/pages/PipelineSeriesRoadmap.jsx b/client/src/pages/PipelineSeriesRoadmap.jsx
index eeeaf5c753..32f3fba54a 100644
--- a/client/src/pages/PipelineSeriesRoadmap.jsx
+++ b/client/src/pages/PipelineSeriesRoadmap.jsx
@@ -22,6 +22,7 @@ import { ArcRoadmapChart } from '../components/pipeline/ArcCanvas';
 import ReaderPanelView from '../components/pipeline/ReaderPanelView';
 import ComparativeRankView from '../components/pipeline/ComparativeRankView';
 import TabPills from '../components/ui/TabPills';
+import PageSkeleton from '../components/ui/PageSkeleton';
 import {
   getPipelineSeries, getIssueEditorial, analyzeIssueEditorial, getSeriesJudge,
 } from '../services/api';
@@ -270,9 +271,18 @@ export default function PipelineSeriesRoadmap() {
 
   if (loading) {
     return (
-      <div className="h-full flex items-center justify-center text-gray-500">
-        <Loader2 size={18} className="animate-spin mr-2" /> Loading reader map…
-      </div>
+      <PageSkeleton
+        label="Loading reader map"
+        fullHeight
+        padded
+        headerRowClass="flex items-center gap-3"
+        titleWidthClass="w-40"
+        showSubtitle
+        subtitleOnMobile
+        tabs={TABS.length}
+        cards={3}
+        sidebar={false}
+      />
     );
   }
 
diff --git a/client/src/pages/PipelineVoiceFingerprint.jsx b/client/src/pages/PipelineVoiceFingerprint.jsx
index c46755d808..96c326dbca 100644
--- a/client/src/pages/PipelineVoiceFingerprint.jsx
+++ b/client/src/pages/PipelineVoiceFingerprint.jsx
@@ -18,8 +18,9 @@
 
 import { useEffect, useState } from 'react';
 import { Link, useParams, useNavigate } from 'react-router';
-import { Loader2, ArrowLeft, Fingerprint, BookOpen, Info } from 'lucide-react';
+import { ArrowLeft, Fingerprint, BookOpen, Info } from 'lucide-react';
 import toast from '../components/ui/Toast';
+import PageSkeleton from '../components/ui/PageSkeleton';
 import { getPipelineSeries, getVoiceFingerprint } from '../services/api';
 
 // A cell is an outlier when the (issue, metricKey) pair is in the drift set.
@@ -59,9 +60,16 @@ export default function PipelineVoiceFingerprint() {
 
   if (loading) {
     return (
-      <div className="h-full flex items-center justify-center text-gray-400">
-        <Loader2 className="animate-spin" size={20} />
-      </div>
+      <PageSkeleton
+        label="Loading voice fingerprint"
+        fullHeight
+        padded
+        headerRowClass="flex flex-wrap items-center gap-2"
+        titleWidthClass="w-56"
+        showAction={false}
+        cards={3}
+        sidebar={false}
+      />
     );
   }
 
diff --git a/client/src/pages/PromptManager.jsx b/client/src/pages/PromptManager.jsx
index 0ff644c384..8ec698bb24 100644
--- a/client/src/pages/PromptManager.jsx
+++ b/client/src/pages/PromptManager.jsx
@@ -2,7 +2,6 @@ import { useState, useEffect, useRef, useMemo } from 'react';
 import { useSearchParams } from 'react-router';
 import { FileText, Variable, RefreshCw, Save, Plus, Trash2, Eye, Briefcase, Search, X, ChevronRight, ChevronDown } from 'lucide-react';
 import toast from '../components/ui/Toast';
-import BrailleSpinner from '../components/BrailleSpinner';
 import ProviderModelSelector from '../components/ProviderModelSelector';
 import { filterSelectableModels, getProviderTimeout } from '../utils/providers';
 import {
@@ -14,6 +13,7 @@ import {
 } from '../utils/formatters';
 import useFieldDraft from '../hooks/useFieldDraft';
 import SettingsTabsHeader from '../components/settings/SettingsTabsHeader';
+import PageSkeleton from '../components/ui/PageSkeleton';
 import PageHeader from '../components/PageHeader';
 import { FormField } from '../components/ui/FormField';
 import Modal from '../components/ui/Modal';
@@ -462,8 +462,8 @@ export default function PromptManager() {
       <div className="flex flex-col h-full">
         <PageHeader icon={FileText} title="Prompt Manager" subtitle={PAGE_SUBTITLE} />
         <SettingsTabsHeader activeTab="prompts" />
-        <div className="flex-1 flex items-center justify-center">
-          <BrailleSpinner text="Loading prompts" />
+        <div className="flex-1 overflow-auto p-4">
+          <PageSkeleton header="none" label="Loading prompts" cards={3} sidebar={false} />
         </div>
       </div>
     );
diff --git a/client/src/pages/QuotaBurn.jsx b/client/src/pages/QuotaBurn.jsx
index c805c22727..25f98db20b 100644
--- a/client/src/pages/QuotaBurn.jsx
+++ b/client/src/pages/QuotaBurn.jsx
@@ -18,7 +18,7 @@ import { useNavigate, useParams } from 'react-router';
 import { AlertTriangle, Flame, RefreshCw } from 'lucide-react';
 import toast from '../components/ui/Toast';
 import Banner from '../components/ui/Banner';
-import BrailleSpinner from '../components/BrailleSpinner';
+import PageSkeleton from '../components/ui/PageSkeleton';
 import FamilyCard from '../components/quotaBurn/FamilyCard';
 import { NumberField } from '../components/quotaBurn/fields';
 import * as api from '../services/api';
@@ -376,7 +376,18 @@ export default function QuotaBurn() {
     // fades while a poll that keeps failing deserves a standing indicator.
   };
 
-  if (loading) return <div className="p-6 text-gray-400"><BrailleSpinner /> Loading burn plan…</div>;
+  if (loading) {
+    return (
+      <PageSkeleton
+        label="Loading burn plan"
+        headerRowClass="flex flex-wrap items-center gap-3"
+        titleWidthClass="w-40"
+        showAction={false}
+        cards={3}
+        sidebar={false}
+      />
+    );
+  }
   // A failed first read used to land here with no cause and no way out but a
   // browser reload — the header (and its "Refresh quota") returns above.
   if (!config) {
diff --git a/client/src/pages/QuotaBurn.test.jsx b/client/src/pages/QuotaBurn.test.jsx
index e94d75be1a..961f3e10dd 100644
--- a/client/src/pages/QuotaBurn.test.jsx
+++ b/client/src/pages/QuotaBurn.test.jsx
@@ -490,7 +490,9 @@ describe('QuotaBurn catalog failure', () => {
     // and a retry can put it back — so nothing announces it without a live region.
     api.getQuotaBurnCatalog.mockRejectedValueOnce(new Error('Catalog request failed'));
     renderPage('/devtools/quota-burn/grok');
-    const banner = await screen.findByRole('status');
+    // Scope to the banner's own text: the first-paint PageSkeleton is also a
+    // `status` region, so a bare role query would race it.
+    const banner = (await screen.findByText('Job choices could not be loaded')).closest('[role="status"]');
     expect(banner).toHaveAttribute('aria-live', 'polite');
     expect(banner).toHaveTextContent('Job choices could not be loaded');
   });
diff --git a/client/src/pages/RoundEditor.jsx b/client/src/pages/RoundEditor.jsx
index fd3fa3ada7..4f6655fa3d 100644
--- a/client/src/pages/RoundEditor.jsx
+++ b/client/src/pages/RoundEditor.jsx
@@ -32,6 +32,7 @@ import ReferenceAnalysis from '../components/songs/ReferenceAnalysis';
 import RoundEditForm from '../components/songs/RoundEditForm';
 import RoundReadView from '../components/songs/RoundReadView';
 import { TEMP_ID_RE } from '../lib/roundDraft.js';
+import PageSkeleton from '../components/ui/PageSkeleton';
 
 export default function RoundEditor() {
   const { id } = useParams();
@@ -45,7 +46,20 @@ export default function RoundEditor() {
   const { partnerSongs, otherSongs, togglePartner } = useRoundPartners({ id, song, setSong });
 
   if (loading) {
-    return <div className="p-6 text-sm text-gray-500">Loading round…</div>;
+    return (
+      <PageSkeleton
+        header="bar"
+        label="Loading round"
+        fullHeight
+        padded
+        barClassName="px-4 py-3 bg-port-card"
+        bodyClassName="p-4"
+        headerRowClass="flex items-center gap-3"
+        titleWidthClass="w-48"
+        cards={2}
+        sidebar={false}
+      />
+    );
   }
   if (!song) {
     return (
diff --git a/client/src/pages/RoundEditor.test.jsx b/client/src/pages/RoundEditor.test.jsx
index 72f507f8f2..5a3ef77f61 100644
--- a/client/src/pages/RoundEditor.test.jsx
+++ b/client/src/pages/RoundEditor.test.jsx
@@ -55,8 +55,9 @@ describe('RoundEditor round→round navigation', () => {
     fireEvent.click(screen.getByText('go-b'));
 
     // The old draft must be gone (so a Save can't write Song A into Song B) and
-    // the loading state shown until the new song arrives.
-    await waitFor(() => expect(screen.getByText(/Loading round/)).toBeTruthy());
+    // the loading state shown until the new song arrives. That state is the
+    // shared PageSkeleton, which announces itself by aria-label, not by text.
+    await waitFor(() => expect(screen.getByRole('status', { name: 'Loading round' })).toBeTruthy());
     expect(screen.queryByText('Song A')).toBeNull();
     expect(screen.queryByRole('button', { name: /^Save$/ })).toBeNull();
 
diff --git a/client/src/pages/SongBookViewer.jsx b/client/src/pages/SongBookViewer.jsx
index 34769eae8b..0ccf07b208 100644
--- a/client/src/pages/SongBookViewer.jsx
+++ b/client/src/pages/SongBookViewer.jsx
@@ -84,6 +84,7 @@ import { safeReadStorage, safeWriteStorage } from '../lib/safeStorage.js';
 import { formatBytes, formatDurationSec } from '../utils/formatters';
 import { isHttpUrl } from '../utils/urlNormalize';
 import { readFileAsBase64, JSON_UPLOAD_MAX_FILE_SIZE } from '../utils/fileUpload';
+import PageSkeleton from '../components/ui/PageSkeleton';
 import {
   getSong, updateSong, deleteSong,
   listSongAttachments, uploadSongAttachment, deleteSongAttachment, songAttachmentUrl,
@@ -593,7 +594,19 @@ export default function SongBookViewer() {
   }
 
   if (loading || !song) {
-    return <p className="p-6 text-sm text-gray-500">Loading song…</p>;
+    return (
+      <PageSkeleton
+        header="bar"
+        label="Loading song"
+        fullHeight
+        padded
+        bodyClassName="p-4"
+        showSubtitle
+        titleWidthClass="w-56"
+        cards={3}
+        sidebar={false}
+      />
+    );
   }
 
   const stageClass = SONG_STAGE_COLORS[song.stage] || SONG_STAGE_COLORS.new;
diff --git a/client/src/pages/Templates.jsx b/client/src/pages/Templates.jsx
index aff4e75187..fd775bf2d9 100644
--- a/client/src/pages/Templates.jsx
+++ b/client/src/pages/Templates.jsx
@@ -4,6 +4,7 @@ import { Layers, Code, Server, Globe, Smartphone, MonitorSmartphone, Plus } from
 import * as api from '../services/api';
 import FolderPicker from '../components/FolderPicker';
 import { FormField } from '../components/ui/FormField';
+import PageSkeleton from '../components/ui/PageSkeleton';
 
 const ICONS = {
   layers: Layers,
@@ -68,9 +69,15 @@ export default function Templates() {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center h-64">
-        <div className="text-gray-500">Loading templates...</div>
-      </div>
+      <PageSkeleton
+        label="Loading app templates"
+        headerRowClass="flex flex-col sm:flex-row sm:items-center justify-between gap-2"
+        titleWidthClass="w-56"
+        showSubtitle
+        subtitleOnMobile
+        layout="grid"
+        cards={6}
+      />
     );
   }
 
diff --git a/client/src/pages/VideoTimelineEditor.jsx b/client/src/pages/VideoTimelineEditor.jsx
index 103d89be19..c0dc6b7818 100644
--- a/client/src/pages/VideoTimelineEditor.jsx
+++ b/client/src/pages/VideoTimelineEditor.jsx
@@ -24,6 +24,7 @@ import {
   TimelineBlock, FloatingLane, LibraryTile, StillTile, AudioRow, BedAudio,
 } from '../components/media/VideoTimelineLanes';
 import { NumberField, FadeFields, RemoveButton } from '../components/media/VideoTimelineInspector';
+import PageSkeleton from '../components/ui/PageSkeleton';
 import {
   assetUrl,
   segmentDuration,
@@ -647,7 +648,17 @@ export default function VideoTimelineEditor() {
   const overlayLabel = useCallback((ov) => ov.assetFile, []);
   const bedLabel = useCallback((tr) => tr.assetFile, []);
 
-  if (loading) return <div className="text-gray-500 text-sm">Loading project…</div>;
+  if (loading) {
+    return (
+      <PageSkeleton
+        label="Loading timeline project"
+        headerRowClass="flex flex-wrap items-center justify-between gap-2 pb-3 border-b border-port-border"
+        titleWidthClass="w-56"
+        cards={3}
+        sidebar={false}
+      />
+    );
+  }
   if (error || !project) {
     return (
       <div className="text-center py-12">
diff --git a/client/src/pages/WorkspaceContexts.jsx b/client/src/pages/WorkspaceContexts.jsx
index 86cc859fc7..e3cf47d871 100644
--- a/client/src/pages/WorkspaceContexts.jsx
+++ b/client/src/pages/WorkspaceContexts.jsx
@@ -4,10 +4,10 @@ import {
   Layers, GitBranch, SquareTerminal, ListChecks, Save, RotateCcw,
   Trash2, FolderGit2, AlertCircle, CheckCircle2, ArrowRight
 } from 'lucide-react';
-import BrailleSpinner from '../components/BrailleSpinner';
 import toast from '../components/ui/Toast';
 import { useAsyncAction } from '../hooks/useAsyncAction';
 import { timeAgo } from '../utils/formatters';
+import PageSkeleton from '../components/ui/PageSkeleton';
 import {
   listWorkspaceContexts, getWorkspaceContext, saveWorkspaceContext,
   restoreWorkspaceContext, deleteWorkspaceContext
@@ -68,7 +68,7 @@ function ContextDetail({ appId }) {
   }, { errorMessage: 'Failed to clear context' });
 
   if (loading) {
-    return <div className="text-sm"><BrailleSpinner text="Loading…" /></div>;
+    return <PageSkeleton header="none" label="Loading workspace context" cards={2} sidebar={false} />;
   }
   if (!ctx) return null;
 
@@ -209,7 +209,15 @@ function ContextList() {
   useEffect(() => { load(); }, [load]);
 
   if (loading) {
-    return <div className="text-sm"><BrailleSpinner text="Loading projects…" /></div>;
+    return (
+      <PageSkeleton
+        header="none"
+        label="Loading workspace projects"
+        layout="grid"
+        gridColsClass="sm:grid-cols-2 lg:grid-cols-3"
+        cards={3}
+      />
+    );
   }
 
   if (rows.length === 0) {
diff --git a/client/src/pages/loadingSkeletons.test.jsx b/client/src/pages/loadingSkeletons.test.jsx
new file mode 100644
index 0000000000..ee8c76bdf9
--- /dev/null
+++ b/client/src/pages/loadingSkeletons.test.jsx
@@ -0,0 +1,174 @@
+import { readFileSync, readdirSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { act, render, screen } from '@testing-library/react';
+import { createMemoryRouter, RouterProvider } from 'react-router';
+
+// A hoisted declaration, so the hoisted `vi.mock` factories below can reach it.
+// Every exported FUNCTION resolves to a call that never settles, so the page
+// stays in its first-paint state for the whole assertion; exported constants
+// pass through untouched (a page that reads `PIPELINE_STAGES.includes(...)`
+// during render would otherwise crash before it could paint anything).
+function pendingModule(path) {
+  return async () => {
+    const actual = await vi.importActual(path);
+    return Object.fromEntries(Object.entries(actual).map(([name, value]) => [
+      name,
+      typeof value === 'function' ? vi.fn(() => new Promise(() => {})) : value,
+    ]));
+  };
+}
+
+vi.mock('../services/api', pendingModule('../services/api'));
+vi.mock('../services/apiCatalog.js', pendingModule('../services/apiCatalog.js'));
+vi.mock('../services/apiCreativeDirector.js', pendingModule('../services/apiCreativeDirector.js'));
+vi.mock('../services/apiImageVideo.js', pendingModule('../services/apiImageVideo.js'));
+vi.mock('../services/apiPipeline.js', pendingModule('../services/apiPipeline.js'));
+vi.mock('../services/apiPrompts', pendingModule('../services/apiPrompts'));
+vi.mock('../services/apiProviders', pendingModule('../services/apiProviders'));
+vi.mock('../services/apiUniverseBuilder.js', pendingModule('../services/apiUniverseBuilder.js'));
+vi.mock('../services/socket', () => ({
+  default: { on: vi.fn(), off: vi.fn(), emit: vi.fn(), connected: false },
+}));
+
+const PAGES_DIR = dirname(fileURLToPath(import.meta.url));
+
+// ---------------------------------------------------------------------------
+// Structural guard — tree-wide, and the one that catches the actual regression
+// this file exists for: a page's top-level `if (loading)` reverting to a bare
+// `<div>Loading…</div>`, which exposes no `status` role and reserves no layout,
+// so the header/tabs pop in and shove the viewport down (#2843, #5659).
+// ---------------------------------------------------------------------------
+const LOADING_GUARD = /^ {2}if \((?:loading|isLoading)\b[^)]*\)\s*(\{)?/;
+
+// Reading the source (rather than rendering all ~50 pages) is deliberate: it
+// covers every page including ones whose render harness would need a bespoke
+// mock, and it keeps working as pages are added.
+function loadingGuardBodies(source) {
+  const lines = source.split('\n');
+  const bodies = [];
+  lines.forEach((line, i) => {
+    const match = LOADING_GUARD.exec(line);
+    if (!match) return;
+    if (match[1]) {
+      // Braced block: consume until the brace depth returns to zero.
+      let depth = 0;
+      const block = [];
+      for (let j = i; j < lines.length; j += 1) {
+        block.push(lines[j]);
+        depth += (lines[j].match(/\{/g) || []).length - (lines[j].match(/\}/g) || []).length;
+        if (j > i && depth <= 0) break;
+      }
+      bodies.push({ line: i + 1, body: block.join('\n') });
+      return;
+    }
+    // Single-expression guard: consume until the statement terminates.
+    const block = [lines[i]];
+    for (let j = i + 1; !block[block.length - 1].trimEnd().endsWith(';') && j < lines.length; j += 1) {
+      block.push(lines[j]);
+    }
+    bodies.push({ line: i + 1, body: block.join('\n') });
+  });
+  return bodies;
+}
+
+const pageFiles = readdirSync(PAGES_DIR)
+  .filter((f) => f.endsWith('.jsx') && !f.includes('.test.'))
+  .sort();
+
+describe('page loading states reserve their layout', () => {
+  it('renders PageSkeleton from every top-level loading guard', () => {
+    const offenders = [];
+    pageFiles.forEach((file) => {
+      const source = readFileSync(join(PAGES_DIR, file), 'utf8');
+      loadingGuardBodies(source).forEach(({ line, body }) => {
+        // `return null` / bare `return` render nothing at all, so there is no
+        // chrome to reflow — they are not skeleton candidates.
+        if (/return\s*(null)?\s*;/.test(body) && !body.includes('<')) return;
+        if (!body.includes('PageSkeleton')) offenders.push(`${file}:${line}`);
+      });
+    });
+    // A bare `<div>Loading…</div>` exposes no `status` role and reserves no
+    // layout, so the header/tabs pop in and shove the viewport down.
+    expect(offenders).toEqual([]);
+  });
+
+  it('gives every PageSkeleton a label naming what is loading, never the bare default', () => {
+    const offenders = [];
+    pageFiles.forEach((file) => {
+      const source = readFileSync(join(PAGES_DIR, file), 'utf8');
+      // One entry per `<PageSkeleton …>` element, self-closing or not.
+      const calls = source.match(/<PageSkeleton\b[\s\S]*?\/?>/g) || [];
+      calls.forEach((call) => {
+        const label = /label="([^"]*)"/.exec(call);
+        if (!label || label[1].trim() === '' || label[1] === 'Loading') offenders.push(`${file}: ${call.split('\n')[0]}`);
+      });
+    });
+    expect(offenders).toEqual([]);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Render guard — the pages converted in #5659, each mounted with its fetch
+// still in flight. A bare text loader exposes no `status` role, so these fail
+// loudly if one comes back.
+// ---------------------------------------------------------------------------
+const RENDERED = [
+  ['AgentsPage', () => import('./AgentsPage').then((m) => m.AgentsPage), '/devtools/agents', '/devtools/agents', 'Scanning for AI agents'],
+  ['AIProviders', () => import('./AIProviders'), '/ai', '/ai', 'Loading providers'],
+  ['BrainScanReport', () => import('./BrainScanReport'), '/brain/links/:id/scan-report', '/brain/links/l1/scan-report', 'Loading scan report'],
+  ['CatalogIngredient', () => import('./CatalogIngredient'), '/catalog/:type/:id', '/catalog/idea/i1', 'Loading ingredient'],
+  ['CreativeDirector', () => import('./CreativeDirector'), '/creative-director', '/creative-director', 'Loading Creative Director projects'],
+  ['Game', () => import('./Game'), '/game', '/game', 'Loading Game studio'],
+  ['Insights (OverviewTab)', () => import('./Insights').then((m) => m.OverviewTab), '/insights/overview', '/insights/overview', 'Loading insights overview'],
+  ['Instances', () => import('./Instances'), '/instances', '/instances', 'Loading instances'],
+  ['Media3DDetail', () => import('./Media3DDetail'), '/3d/:id', '/3d/abc', 'Loading 3D model'],
+  ['PipelineContinuityBible', () => import('./PipelineContinuityBible'), '/pipeline/series/:seriesId/continuity', '/pipeline/series/s1/continuity', 'Loading series continuity'],
+  ['PipelineExport', () => import('./PipelineExport'), '/pipeline/series/:seriesId/export', '/pipeline/series/s1/export', 'Loading export options'],
+  ['PipelineIssue', () => import('./PipelineIssue'), '/pipeline/issues/:issueId/:stageId', '/pipeline/issues/i1/outline', 'Loading pipeline issue'],
+  ['PipelineManuscriptEditor', () => import('./PipelineManuscriptEditor'), '/pipeline/series/:seriesId/manuscript', '/pipeline/series/s1/manuscript', 'Loading manuscript'],
+  ['PipelineReverseOutline', () => import('./PipelineReverseOutline'), '/pipeline/series/:seriesId/outline', '/pipeline/series/s1/outline', 'Loading reverse outline'],
+  ['PipelineSeries', () => import('./PipelineSeries'), '/pipeline/series/:seriesId', '/pipeline/series/s1', 'Loading series'],
+  ['PipelineSeriesRoadmap', () => import('./PipelineSeriesRoadmap'), '/pipeline/series/:seriesId/roadmap', '/pipeline/series/s1/roadmap', 'Loading reader map'],
+  ['PipelineVoiceFingerprint', () => import('./PipelineVoiceFingerprint'), '/pipeline/series/:seriesId/voice', '/pipeline/series/s1/voice', 'Loading voice fingerprint'],
+  ['PromptManager', () => import('./PromptManager'), '/prompts', '/prompts', 'Loading prompts'],
+  ['QuotaBurn', () => import('./QuotaBurn'), '/devtools/quota-burn', '/devtools/quota-burn', 'Loading burn plan'],
+  ['RoundEditor', () => import('./RoundEditor'), '/rounds/:id', '/rounds/r1', 'Loading round'],
+  ['SongBookViewer', () => import('./SongBookViewer'), '/songbook/:id', '/songbook/s1', 'Loading song'],
+  ['Templates', () => import('./Templates'), '/templates', '/templates', 'Loading app templates'],
+  ['VideoTimelineEditor', () => import('./VideoTimelineEditor'), '/media/timeline/:projectId', '/media/timeline/p1', 'Loading timeline project'],
+  ['WorkspaceContexts', () => import('./WorkspaceContexts'), '/workspace-contexts', '/workspace-contexts', 'Loading workspace projects'],
+];
+
+describe('converted pages announce a labelled busy region on first paint', () => {
+  beforeEach(() => {
+    // jsdom ships no `matchMedia`, and a page that reads one on mount throws
+    // before it can paint its skeleton.
+    window.matchMedia = vi.fn((query) => ({
+      matches: false,
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }));
+  });
+
+  // A DATA router, not `<MemoryRouter>`: pages that guard unsaved edits call
+  // `useBlocker`, which throws outside one.
+  it.each(RENDERED)('%s', async (_name, load, routePath, entry, label) => {
+    const mod = await load();
+    const Page = mod.default || mod;
+    const router = createMemoryRouter(
+      [{ path: routePath, element: <Page /> }],
+      { initialEntries: [entry] },
+    );
+    render(<RouterProvider router={router} />);
+    // Settle the mount effects that fire before the (never-settling) fetch, so
+    // the assertion isn't racing an act() warning.
+    await act(async () => {});
+
+    const status = screen.getAllByRole('status')[0];
+    expect(status).toHaveAttribute('aria-busy', 'true');
+    expect(status).toHaveAttribute('aria-label', label);
+  });
+});