[IAmJSD]

Loading states were inconsistent: most panels used shimmer skeletons, but several showed plain "Loading..." text (sometimes next to a skeleton), a slow response looked like a hang, and the Opportunities skeleton was invisible because its cells collapsed to 0px. This PR moves the remaining block-level text loaders to skeletons, fixes the Opportunities skeleton, and adds an app-wide "still loading" note after 8 s.

Refs #186
Partial: text loaders that live inside <option> or <label> elements (where a shimmer cannot render) are left as text, and there is no request timeout or abort, only a visible note.

What changed

• frontend/src/lib/skeleton.ts: every show* helper now adds a screen-reader-only "Loading…" status (the shimmer stays aria-hidden) and arms an 8 s timer (SKELETON_SLOW_MS). If the skeleton is still on screen and its panel is not hidden when the timer fires, it appends "Still loading. This is taking longer than usual." with role=status. A success render that replaces the children, or teardownSkeleton, turns the timer into a no-op. New showSkeletonText(container, lines) helper.
• Text loaders moved to skeletons:
  • riexchange.ts: loadAutomationSettings (4 lines) and loadExchangeHistory (3x7 rows).
  • settings.ts: loadGlobalSettings (#settings-loading) and loadOverridesPanel.
  • apikeys.ts: the create-key permissions list.
• styles/base.css: .skeleton-table is full width with fixed layout and a minimum box width; .skeleton-slow-note is centered, muted and spans grid rows (Home KPI tiles, Plans cards).
• styles/responsive.css: #recommendations-list > table.skeleton-table keeps display: table, so the Opportunities skeleton cells no longer collapse to 0px.
• Commits: be1d55d2 (the change), 8aa8baa9 (tests).

Why this approach

Skeletons were already the dominant pattern (#344), so the remaining text loaders were moved to them rather than the reverse. The slow fallback lives in the shared helper, so all of the roughly 15 skeleton call sites get it without per-module code. It checks whether shimmer elements are still present rather than a data marker, because most success renders replace content via innerHTML and never call teardown. It only adds a note and never aborts the request, so a slow but valid response still lands. Empty responses are already handled by each renderer's own empty state; the remaining "looks like a hang" case was a skeleton left on screen, which the note covers.

Screenshots

Before is main (a14dc8f2), after is this branch. Both are headless Chromium at 1440x900 against the repo's mocked e2e API. The API routes in these scenarios never resolve.

Before	After

• Opportunities, slow load (9 s): before, the skeleton rows have 0-width shimmer, so the panel is a blank card. After, the shimmer spans all columns and the "Still loading. This is taking longer than usual." note appears after 8 s.
• RI Exchange history: before, plain "Loading exchange history..." text next to skeleton tables. After, the same skeleton rows as the rest of the page.
• Admin > General: before, "Loading settings..." text. After, a text skeleton in place of the form.

Verification

Run on this branch's head 8aa8baa9 on top of main a14dc8f2, from frontend/:

• Lint: 0 errors (142 warnings, all already on main). Typecheck and build pass.
• Jest (--maxWorkers=2): 109 suites, 3497 passed, 1 skipped, 0 failed. The changed suites also pass with --randomize (32 tests).
• New jest tests: skeleton.test.ts +10 with fake timers (showSkeletonText; one screen-reader status per skeleton kind; note appears exactly at the threshold; no note after an innerHTML handoff, after teardown, or in a hidden panel; re-show restarts the clock without stacking notes). riexchange-automation-settings.test.ts +1 (skeleton instead of "Loading settings...").
• Playwright (e2e-local.sh): 158 passed, 0 failed, including the new tests-e2e/loading-fallback.spec.ts, which holds the recommendations request open and checks the skeleton has non-zero width, the note appears after 8 s of page clock, and both clear when data arrives.
• Secrets scan clean (planted key flagged); scripts/test-git-secrets-allowlist.sh: 137 PASS, 0 FAIL.

Notes for review

• This is a subset of the issue. Left as text on purpose: the RI Exchange target-offering <option> placeholder, federation.ts and ladder-account-selector.ts select/label text (a shimmer cannot sit inside an <option> or label), the ladder.ts initial template "Loading…", the ladder-timeline status text, and the Archera comparison live-region text (screen-reader only).
• Open for the UI owner: the 8 s threshold and the note copy; the extra sr-only "Loading…" status per skeleton.
• Skeleton tables now use fixed layout (equal-width columns), which slightly changes the look of the RI Exchange and History skeletons.
• The note does not cancel or retry the request. A real timeout or abort would need AbortController plumbing in api/client.ts, which is left out of this PR.

Overlaps

• fix(frontend): low-severity accessibility fixes (focus, aria, target size) #729 also edits lib/skeleton.ts (adds aria-busy plus a MutationObserver). It will conflict, and the two accessibility approaches overlap: keep one of them (aria-busy with the observer, or the sr-only status here) when combining.
• feat(frontend): Admin Purchasing policies page is very long with a mid-page partial load #190 changes the same lines of riexchange.ts loadAutomationSettings and riexchange-automation-settings.test.ts; combine by using showSkeletonText inside that branch's "Exchange Automation" frame.
• fix(frontend): first-run empty state says no rows match filters with no next step #756, chore(frontend): add typography foundation (line-height, heading scale, font inherit) #741, fix(frontend): undefined CSS custom properties and inline-styled MFA panels #745 and chore(frontend): low-severity table and CSS hygiene fixes #725 edit styles/base.css; feat(frontend): wide data tables clip right-edge columns under sticky header + action bar with no scroll affordance #185 and chore(frontend): low-severity table and CSS hygiene fixes #725 edit styles/responsive.css.
• fix(frontend): low-severity copy, toast, confirm and stale-state fixes #728 and fix(frontend): account delete confirm does not name the account or list cancelled purchases #734 change loadOverridesPanel in settings.ts; fix(frontend): raw transport and developer errors reach users instead of friendly messages #748 edits settings.ts/apikeys.ts; Sweep toISOString().split('T')[0] -> toLocalDateInputValue across frontend date inputs #51 and fix(frontend): confirm dialog focuses destructive button, lacks a11y, native dialogs remain #705 edit apikeys.ts.
• Many branches edit riexchange.ts (refactor(frontend): consolidate column-filter popover plumbing into shared lib #18, fix(frontend): RI-exchange cost chips and totals hardcode "$" and discard currency_code #284, fix(frontend): RI exchange confirm lists offering UUIDs, no instance type or cost delta #709, fix(frontend): filter Clear hides all rows; user/group form validation toast-only #727, fix(frontend): low-severity accessibility fixes (focus, aria, target size) #729, fix(frontend): status badges use four shapes and conflicting colors per status #737, fix(frontend): RI exchange result is not announced and the exchange ID vanishes after 2s #738, fix(frontend): RI exchange target picker says type a UUID but offers no field #740); only fix(frontend): low-severity accessibility fixes (focus, aria, target size) #729 touches the same loader lines.

Note for the UI owner

This changes UI code that @cristim owns. IAmJSD reviewed the before/after screenshots and asked for it to be merged; any design point you disagree with can be a follow-up.

🤖 Generated with Claude Code

[coderabbitai]

Caution

Review failed

The pull request is closed.

Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

_{Comment @coderabbitai help to get the list of available commands.}

[IAmJSD]

Independent review (IAmJSD's agent, fresh context, given only the diff, the issue and the PR text): APPROVE e6add163490a30d72b034092f21d55ffd84b3e8d

Blocking:

• none
  Non-blocking:
• frontend/src/lib/skeleton.ts:33,172,180: the comment says aria-busy and the sr-only status "coexist" and that the status/slow note are "what a screen reader actually hears", but both role=status nodes sit inside the container that main's markBusy (fix(frontend): low-severity accessibility fixes (focus, aria, target size) #729) sets to aria-busy="true". Under ARIA, assistive tech may hold back changes in a busy subtree until busy clears, and by then the note has been wiped. Chromium only checks aria-busy on the live-region root, so Chrome is fine. Check with NVDA+Firefox, or soften the comment.
• frontend/src/riexchange.ts:1694-1699: the busy flag is set twice. loadingShell gets a manual aria-busy (feat(frontend): Admin Purchasing policies page is very long with a mid-page partial load #190) and loadingBody gets its own through showSkeletonText. On success the shell is swapped out with replaceChildren and teardownSkeleton is never called, so loadingBody's observer and 8 s timer are not torn down; skeletonStillShown's isConnected check means this never shows a note. Harmless, just redundant.
• frontend/src/tests/riexchange-automation-settings.test.ts:172: not.toContain('Loading settings...') can never fail, because the feat(frontend): Admin Purchasing policies page is very long with a mid-page partial load #190 frame never rendered that string. The p.loading-is-null check on line 171 is the assertion that does the work.
  Attacked: Diffed origin/main...HEAD (10 files). e6add16^2 is 6122fa2. Main has one newer commit (f2ab673, app.ts only) that touches no PR file, and merge-tree is clean. Compared e6add16 with both parents: skeleton.ts keeps main's aria-busy/MutationObserver whole, and the slow timer and status live in activateSkeleton, with teardown clearing both. The skeleton.test aria-busy table gained a 'text' row and dropped nothing. The responsive.css skeleton rule sits after main's fix(frontend): page-level horizontal scroll on Opportunities, Purchases and Admin #703 #recommendations-list > table block rule and before the feat(frontend): wide data tables clip right-edge columns under sticky header + action bar with no scroll affordance #185 rules. riexchange keeps the feat(frontend): Admin Purchasing policies page is very long with a mid-page partial load #190 legend/aria-busy frame. Main's SUP-03: Two escaping-convention gaps in innerHTML templates (defense-in-depth only) #37 escaping tests are intact. Checked every skeleton call site, including the ones main added since (trends.ts, users/loadStatus.ts, dashboard upcoming retry), for nested containers, non-wiping success renders and table-element containers: none found. No innerHTML or inline styles added. Re-ran skeleton and riexchange-automation-settings jest: 41/41.

[IAmJSD]

Local verification at e6add163 merged onto current main (f2ab6731; merge-tree aed59292; Linux, Node, headless Chromium):

• This branch's own checks passed at this head: lint, typecheck, build, the full jest suite, the full Playwright e2e suite, and the git-secrets checks (see Verification in the PR body).
• The combined tree of every UI PR in this merge wave (tree 04af8e9b, main plus 5 PRs) passes npm ci, lint, typecheck, build, jest (1 skipped, 4122 passed, 4123 total), and the full Playwright suite (238 passed).
• CI is green on e6add163 (CI Success, Run pre-commit hooks).
• The independent review above approves this exact head.
• Nothing was applied to any cloud.

[IAmJSD]

Marked ready and merged by IAmJSD's agent, at IAmJSD's request (IAmJSD reviewed the before/after screenshots; cristim is traveling), after the independent review and local verification above, all at e6add163.