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);
+  });
+});