perf(ui): content-first detail pages + loading & motion quick wins#1024
Merged
Conversation
Site-audit quick wins across perceived speed, loading, and motion. No behaviour change to RAG/retrieval or clinical content. Content-first detail pages (was: spinner/skeleton-first): - Medications, Services and Forms detail pages now render the public fixture record server-side as a fallback and swap in the owner-aware live record in place, reusing the differentials `fallbackRecord` pattern. SSR and the initial client render both start from the fallback, so there is no hydration mismatch. - Drop `cache: "no-store"` from the medication hook so public responses honour the API's CDN/browser cache headers (matches the sibling registry/differential hooks). Loading / assets: - `Geist_Mono` `preload: false` — the mono face is never in LCP text, so stop preloading it on every route (still loads on-demand via swap). - next.config `images`: enable AVIF then WebP; allow Supabase Storage signed-URL remotePatterns for future next/image use. Motion smoothness (animate the compositor, not layout): - Therapy-compass knob: animate `transform` instead of `left`. - Upload progress bar: `transform: scaleX()` instead of `width`. - Settings header: drop the permanent `will-change: transform`. - Global `:active` press: scope the 1px nudge to buttons/summary, not every `<a>` (it was nudging inline citation/body links). Verified: typecheck, lint, design-system contract, type-scale, icon-scale and the full offline unit suite pass. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UbhUVWVJRwDibC2YtJ6aRX
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (4)
📝 WalkthroughWalkthroughChangesServer-rendered fallback records were added for form, service, and medication detail pages. Medication rendering now shows fallback content while fetching. Image formats, Supabase image sources, caching, font loading, progress animation, active styles, header transforms, and therapy compass animations were updated. SSR rendering and UI behavior
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant MedicationPage
participant MedicationRecordPage
participant useMedicationDetail
participant MedicationRecordDetail
MedicationPage->>MedicationRecordPage: provide fallback record and governance
MedicationRecordPage->>useMedicationDetail: request medication detail
MedicationRecordPage->>MedicationRecordDetail: render fetched or fallback record
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
BigSimmo
marked this pull request as ready for review
July 21, 2026 00:59
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
BigSimmo
enabled auto-merge (squash)
July 21, 2026 00:59
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
src/app/medications/[slug]/page.tsx (1)
35-48: 🎯 Functional Correctness | 🔵 TrivialRun the required clinical readiness checks before handoff.
This change alters first-render clinical content and governance. Run the narrow medication-domain check,
npm run check:production-readiness, and the clinical governance preflight under Node 24.x/npm 11.x.As per coding guidelines, clinical output changes require the smallest relevant domain check, production-readiness validation, and clinical governance preflight.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/app/medications/`[slug]/page.tsx around lines 35 - 48, Run the required validation for the first-render clinical content changes in the medication page: execute the narrow medication-domain check, npm run check:production-readiness, and the clinical governance preflight using Node 24.x with npm 11.x before handoff.Source: Coding guidelines
src/components/clinical-dashboard/medication-record-page.tsx (1)
508-520: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winAdd regression coverage for fallback state transitions.
Cover fallback content during loading, replacement by live data, and behavior when the live request fails or returns no record.
As per coding guidelines, add the smallest relevant behavior test and run the narrowest validation for the touched surface.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/clinical-dashboard/medication-record-page.tsx` around lines 508 - 520, Add focused regression tests for the medication record page’s conditional rendering around MedicationRecordDetail, LoadingPanel, and the error fallback: verify loading displays fallback content, live record data replaces it, and failed or empty requests display the expected error or “Medication not found.” message. Keep the tests scoped to these state transitions and run the narrowest relevant test validation.Source: Coding guidelines
src/components/clinical-dashboard/use-medication-catalog.ts (1)
39-44: 🔒 Security & Privacy | 🔵 TrivialVerify that shared caching does not bypass the registry rate limiter.
Removing
no-storeallows HTTP cache behavior, while the supplied API contract advertisess-maxage=3600for public fixtures. A shared cache may serve later requests without executing/api/medications, bypassingconsumeSubjectApiRateLimitdespite the route comment stating every caller must pass it. If that guarantee is required, enforce limiting at the edge or remove shared cacheability; verify the deployed cache topology before relying on this change. (nextjs.org)🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/clinical-dashboard/use-medication-catalog.ts` around lines 39 - 44, Verify the deployed cache topology around the medication catalog fetch and registry route before retaining the default cache mode. Ensure shared-cache hits cannot bypass the route’s consumeSubjectApiRateLimit guarantee; if that cannot be enforced at the edge, restore non-shared caching in the fetch used by the medication catalog hook.Source: MCP tools
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@next.config.ts`:
- Around line 57-61: Update the remotePatterns Supabase image allowlist in
next.config.ts to replace the wildcard hostname with the exact production
project host, adding the explicitly configured staging host only when required.
Preserve the existing /storage/v1/object/** pathname scope, and configure search
only if signed URLs need query strings.
In `@src/components/registry-record-loader.tsx`:
- Around line 65-73: Prevent SSR fixture governance from being treated as
authoritative: in src/components/registry-record-loader.tsx lines 65-73, mark
fallback verification provisional or neutral until live governance
reconciliation; in src/app/medications/[slug]/page.tsx lines 41-45, remove the
hard-coded locally_reviewed status from authoritative fallback governance; and
in src/components/clinical-dashboard/medication-record-page.tsx lines 478-493,
suppress or neutralize fallback governance whenever live data is unavailable,
including request failures.
---
Nitpick comments:
In `@src/app/medications/`[slug]/page.tsx:
- Around line 35-48: Run the required validation for the first-render clinical
content changes in the medication page: execute the narrow medication-domain
check, npm run check:production-readiness, and the clinical governance preflight
using Node 24.x with npm 11.x before handoff.
In `@src/components/clinical-dashboard/medication-record-page.tsx`:
- Around line 508-520: Add focused regression tests for the medication record
page’s conditional rendering around MedicationRecordDetail, LoadingPanel, and
the error fallback: verify loading displays fallback content, live record data
replaces it, and failed or empty requests display the expected error or
“Medication not found.” message. Keep the tests scoped to these state
transitions and run the narrowest relevant test validation.
In `@src/components/clinical-dashboard/use-medication-catalog.ts`:
- Around line 39-44: Verify the deployed cache topology around the medication
catalog fetch and registry route before retaining the default cache mode. Ensure
shared-cache hits cannot bypass the route’s consumeSubjectApiRateLimit
guarantee; if that cannot be enforced at the edge, restore non-shared caching in
the fetch used by the medication catalog hook.
🪄 Autofix (Beta)
✅ Autofix completed
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: e41de96c-06aa-43ca-ae34-91a0adbf5ad6
📒 Files selected for processing (14)
next.config.tssrc/app/forms/[slug]/page.tsxsrc/app/globals.csssrc/app/layout.tsxsrc/app/medications/[slug]/page.tsxsrc/app/services/[slug]/page.tsxsrc/components/clinical-dashboard/DocumentManagerPanel.tsxsrc/components/clinical-dashboard/medication-record-page.tsxsrc/components/clinical-dashboard/settings-dialog.tsxsrc/components/clinical-dashboard/use-medication-catalog.tssrc/components/forms/form-detail-client.tsxsrc/components/registry-record-loader.tsxsrc/components/services/service-detail-client.tsxsrc/components/therapy-compass/therapy-compass.css
Contributor
|
Note Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it. Fixes Applied SuccessfullyFixed 3 file(s) based on 2 unresolved review comments. Files modified:
Commit: The changes have been pushed to the Time taken: |
Fixed 3 file(s) based on 2 unresolved review comments. Co-authored-by: CodeRabbit <noreply@coderabbit.ai>
…ance reconciles Completes the content-first governance fix for services/forms. CodeRabbit's autofix addressed the medications path (fallback governance no longer asserts a hard-coded "locally_reviewed" status, and it is dropped on fetch failure) but did not touch RegistryRecordLoader. During the provisional (loading) paint, RegistryRecordLoader now renders the public fixture record with `verification.locallyVerified` forced false, so a stale "locally verified" badge cannot flash in before the `ready` branch reconciles it against authoritative live governance. Mirrors the medications fix and the differentials reference pattern (content-first, but verification/review status only from authoritative data). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UbhUVWVJRwDibC2YtJ6aRX
This was referenced Jul 21, 2026
BigSimmo
added a commit
that referenced
this pull request
Jul 22, 2026
…solve #15) (#1057) * test(clinical): content-first + governance-badge regression tests (#15) Cover the content-first transitions flagged in #1024's CodeRabbit review for the two record loaders, locking in the clinical-safety invariant that no authoritative verification badge is asserted before live governance reconciles: - registry-record-loader.dom.test.tsx (8 tests): fallback paint during loading, the fixture-flag neutralization on the provisional paint, spinner when no fallback, live swap-in reconciling the badge on/off against governance, passthrough when governance is absent, and not_found / unauthorized states. - medication-record-page.dom.test.tsx (6 tests): fallback paint vs skeleton, live swap-in, error-empty panel, and the governance-drop-on-error invariant (a fixture "Reviewed" badge must not persist after an error) contrasted with the in-flight loading state that trusts the SSR governance. Test-only; no source/behaviour change. 14/14 pass under the jsdom project. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * docs(issues): resolve #15 — content-first regression tests added Move #15 to Resolved/archive; covered by the two new jsdom suites in this PR. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
11 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Site-audit "quick wins" across perceived speed, loading, and motion smoothness. All changes are UI/asset-level — no RAG/retrieval, clinical content, governance, auth, or data changes.
Content-first detail pages (were spinner/skeleton-first)
fallbackRecordand swap in the owner-aware live record in place — reusing the existing differentials pattern. First meaningful paint no longer waits on a client round-trip. SSR and the initial client render both start from the same fallback, so there is no hydration mismatch; owner-only slugs (absent from the public snapshot) keep the existing loading path.cache: "no-store"so public responses honour the API'spublic, max-age=300, s-maxage=3600, stale-while-revalidateheaders (owner responses stayprivate, no-storeviaVary: Authorization). Matches the sibling registry/differential hooks.Loading / assets
Geist_Monopreload: false— the mono face never appears in initial/LCP text, so it no longer competes for a critical-path preload on every route (still loads on-demand viaswap).next.configimages: enable AVIF→WebP and allow Supabase Storage signed-URLremotePatternsfor futurenext/imageuse.Motion smoothness (animate the compositor, not layout)
transforminstead ofleft.transform: scaleX()instead ofwidth.will-change: transform.:active1px press scoped tobutton/summary(was nudging every inline<a>, including citation/body links).Deliberately not included (reclassified as architectural, not a quick win): lifting the formulation/specifiers catalogue data off the client bundle — those features run client-side local search with no API backing, so moving the data server-side would need new endpoints or per-keystroke round-trips.
RAG impact: no retrieval behaviour change — no files under the protected retrieval/ranking/selection/eval surfaces were touched.
Verification
npm run verify:pr-localtypecheck,lint, full offline unit suite (npm run test— 3028 passing),check:design-system-contract,check:type-scale,check:icon-scale. One unrelated pre-existing flake (pdf-extraction-budget.test.ts, a Python child-process deadline test) fails identically on a pristine tree with these changes stashed.Verification not run: production build was not run in-session (change adds an images config + font preload flag) — deferred to CI.npm run verify:uiwhen UI/styling/reduced-motion changedUI verification not run: deferred to CI (needs dev server + Chromium).Hydration-safety reasoned: SSR and the initial client render both start from thefallbackRecord; reduced-motion is unaffected (all touched animations keep theirmotion-reduce/motion-safeguards and the global reduced-motion reset).Risk and rollout
next/imagehas no production consumers today (mockups are dev-only), so theimagesconfig is inert in prod until adopted.Clinical Governance Preflight
Clinical KB Database(sjrfecxgysukkwxsowpy) — untouchedderiveGovernanceFromSections)Notes
🤖 Generated with Claude Code
https://claude.ai/code/session_01UbhUVWVJRwDibC2YtJ6aRX
Generated by Claude Code
Summary by CodeRabbit
Performance
Bug Fixes