feat(startup): add DES-24 preloader and responsive mobile/error screens

[paulfalgout]

Add animation from the first HTML frame, seamless runtime handoff, clearer interruption screens, and responsive search and dialogs.

DES-24 — production-ready startup animation

A visible start

The initial HTML includes the shared glow, core and rings, so the visual animates before JavaScript or authentication completes. The runtime adopts the same visual and preserves its animation phase. Dismissal begins a 160 ms exit immediately, without a reveal delay or minimum-visible hold; it does not hold app readiness. Reduced-motion support remains.

Ready workspace switches now show content without fading in from opacity 0.

Captured from the production build with deliberately held requests and a synthetic 403 response. This shows appearance and handoff, not a startup-speed measurement or the normal-success exit.

Clearer interruptions

404/500 retain their workspace Back action. “Hold up” keeps its account-setup guidance and has no new action. Organization sign-in keeps its existing design while removing its invisible delay; the unused prelogin spinner branch is removed.

Mobile interactions

• Full-screen search, back/clear controls and keyboard-accessible result buttons.
• Full-height dialogs, compact confirmations, safe-area spacing and embedded-form visual-viewport listeners.
• Dialog labels, focus containment/restoration and topmost-only Escape/native close handling. The global button-minimum override is removed; component-specific sizing remains.

Review focus

Four commits: startup/recovery → error/account setup → mobile/dialogs → workspace fade removal.

• Startup ownership: index.html, startup-visual.scss, startup_views.js and app.js — shared HTML/runtime styling, visual-node adoption, animation-phase preservation, bootstrap retry and exit cleanup.
• Dialog layers: close-request.js and dialog-focus.js — nested close order, focus return and cleanup.
• Mobile behavior: patient-search_views.js, modals.scss and form-viewport.js — scrolling, keyboard resizing and desktop regressions.

Verification

At 3d69acab, focused checks passed:

Check	Result
Production build and lint	Passed
Focused navigation/startup	28/28
Startup/recovery E2E · reduced motion	8/8
Component tests · previous e7981f4e	5/5

The full suite is incomplete. The previously observed broader non-JSON error failure also reproduced on its prior head. Live API/authentication, real mobile keyboard/safe areas, nested-dialog interactions and precise animation timing still need QA.

Visual evidence: the loading clip uses the production build at e7981f4e, with animation before JavaScript and phase-preserving runtime adoption; the loader is unchanged at 3d69acab. Status/mobile comparisons retain their 24 error-free captures at cc9b22fa; their owning source files are unchanged through 3d69acab. Their before images use pinned develop snapshot bf27195c, rather than the current develop tip. All content is synthetic. Held requests and a synthetic 403 demonstrate appearance and handoff, not measured speed, live authentication or normal-success exit; blocked service workers produced a recorded Workbox registration error.

QA1 now serves 3d69acab8d91784909e2cf3054f4041e655fb9f6.

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

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

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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