fix: convert 24 pages to PageSkeleton so first paint stops reflowing (#5659)

[atomantic]

Summary

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

All 24 now render the shared PageSkeleton with the axes matching their loaded shape:

• Header-bearing shells (header="bar" + fullHeight): Creative Director, Pipeline Issue, Round Editor, SongBook Viewer, and the Game detail workspace.
• Two-pane shells (layout="split"): Pipeline Series, mirroring its collapsible 360px bible rail.
• Padded full-bleed scrollers (padded + fullHeight): the Pipeline continuity / export / reverse-outline / voice-fingerprint / reader-map / manuscript pages and Catalog Ingredient.
• Plain padded pages: Agents, Instances, Templates, Quota Burn, 3D detail, Brain scan report, Video Timeline editor.
• Body-only (header="none", page keeps painting its own header): AI Providers, Prompt Manager, Insights overview, Workspace Contexts.

Each call carries a specific screen-reader label ("Loading providers", not the bare default) so the busy region names what is loading. padded/fullHeight follow whether the route is in Layout.jsx's isFullWidthRoute list.

Also in scope:

• Insights' local SummaryCardSkeleton copy is deleted in favour of the shared primitive (one skeleton, not a per-page duplicate).
• Models.jsx's <PageSkeleton /> Suspense fallback picks up a real label — it was the only remaining bare-default call.
• BrailleSpinner is untouched for inline busy states inside buttons and cards; this change is only the top-level first paint.

Acceptance: grep -rnE "if \(loading\) (return )?<div" client/src/pages now returns nothing.

Test plan

• New client/src/pages/loadingSkeletons.test.jsx:
  • Mounts each of the 24 converted pages with its data fetch still in flight (service modules mocked so every exported function never settles, constants passed through) and asserts the page announces a role="status" region with aria-busy="true" and its own non-default aria-label. A bare <div>Loading…</div> exposes no status role, so a revert fails loudly.
  • A tree-wide source guard over client/src/pages/*.jsx: every top-level if (loading) branch that renders anything must render PageSkeleton, and no <PageSkeleton> may ship the default label. This keeps working as pages are added.
  • Verified the guards actually fail: reverting Templates.jsx to its old bare loader failed both the structural and the render assertion.
• client/src/components/ui/PageSkeleton.test.jsx gains the newly used prop combinations — header="bar" + fullHeight (shell keeps h-full, the body owns the scroll) and layout="grid" + header="none".
• Two pre-existing tests updated for the new markup: RoundEditor.test.jsx now matches the skeleton's aria-label instead of loader text, and QuotaBurn.test.jsx scopes its banner query by text since the first-paint skeleton is also a status region.
• cd client && npm test — 854 files, 10715 tests, all passing. npm run lint (biome) clean.
• cd server && npm test — 1832 files, 37253 tests passing (route-coverage guards read client/src/App.jsx).

Closes #5659

https://claude.ai/code/session_01DxNA8g7B5hZd4uswfUM1xn