Make answer loading pulse reliable on iPhone and PWA - #1995
Conversation
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
|
Warning Review limit reachedYou’ve reached a temporary PR review limit under our Fair Usage Limits Policy. Next review available in: 3 minutes Your organization has reached its usage spending cap. Adjust your spending cap in the billing tab. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (5)
Comment |
…ress (#2046) * fix(a11y): stop OS Reduce Motion from freezing and hiding answer progress The answer-loading panel was reported dead on a physical iPhone in both Safari and the installed PWA. Three prior PRs (#1974, #1989, #1995) diagnosed it as a Mobile WebKit repaint bug and all three failed on the device. The cause was this app's own reduced-motion CSS: with iOS Reduce Motion on, the universal suppression rule froze every animation on the page (including the step spinner) and the ECG trace was additionally set to `opacity: 0`, so the only progress indicator disappeared entirely. Every gate stayed green because playwright.config.ts applies `reducedMotion: "reduce"` suite-wide while the one spec asserting the animation opts out to "no-preference" first, so the default user configuration was never exercised. The only WebKit project is Desktop Safari; there was no mobile-WebKit coverage at all. Three changes: 1. Suppressing motion no longer deletes the indicator. The reduced-motion rules stop the animation but leave a legible static trace instead of `opacity: 0`. 2. New tri-state Motion preference (System / Reduced / Full). "Full" is an explicit opt-in that overrides an OS Reduce Motion request, because iOS Reduce Motion is commonly enabled for app-launch zoom rather than vestibular sensitivity and there was no in-app way to get the feedback back. Default stays "system", so nobody silently gains motion. The `motion-reduce`/`motion-safe` Tailwind variants are redefined via @custom-variant so the override reaches all 164 call sites. 3. The pulse becomes a travelling sweep. The previous whole-line opacity fade (0.2 -> 1.0 over 1.8s) technically ran but was too subtle on a phone hairline to read as motion. It is now a continuously scrolling ECG strip driven only by `transform: translateX`, reusing the compositor recipe `.animate-skeleton-shimmer::after` already relies on. Adds tests/ui-phone-motion.spec.ts covering the exact reported configuration (phone + OS Reduce Motion), which nothing covered before. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UYndHWrYJzirxbBvt68Tmx * docs(ledger): record phone/PWA animation defect review Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UYndHWrYJzirxbBvt68Tmx * docs(issues): capture phone motion verification follow-ups Four inbox requests from the PR #2046 investigation. They travel with their owning product PR rather than a dedicated ledger-only branch, per the AGENTS.md PR-bundling rule. - P2 issue: playwright.config.ts applies reducedMotion:"reduce" suite-wide, so no gate reflects the default user configuration. That inversion is why three PRs shipped green against a broken phone. - P2 task: no mobile-WebKit or display-mode:standalone Playwright project; phone coverage is a narrow viewport on desktop engines, while the only phone-AND-standalone CSS in the repo goes untested. - P3 task: physical iPhone acceptance still owed for this fix, in Safari and the installed PWA with Motion set to Full. - P3 rec: three dead spring easing tokens in globals.css. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UYndHWrYJzirxbBvt68Tmx --------- Co-authored-by: Claude <noreply@anthropic.com>
1 participant
Summary
Root cause
The prior WebKit fix changed the SVG path animation to opacity, but it still animated the SVG child itself. Mobile WebKit can report that animation as running without repainting the SVG, particularly in an installed PWA. The previous test checked computed opacity only, so it could pass while the user saw a static trace.
Verification
npm run format— passednpm test -- tests/answer-activity-trace-css.test.ts— 3/3 passednpm run test:e2e -- tests/answer-progress-ui-smoke.spec.ts --project=webkit --grep 'follow-up answer generation stays compact|answer progress keeps focus'— 2/2 passed against a production build; raster buffers differ between pulse phasesnpm run check:design-system-contract— passednpm run check:branch-review-ledger— passednpm run verify:phone-chrome -- --dry-run --files ...— selector inspected; the full broad phone-chrome/UI suite was not run because the sharedglobals.csstrigger expands into unrelated routesnpm run ensure— local development readiness timed out while compiling the proxy; the isolated production server used by Playwright started and completed the focused WebKit testsAccessibility and device boundary
System or app-level reduced motion intentionally suppresses the pulse. Forced-colour behavior remains covered. Playwright WebKit verifies actual raster change, but final installed-PWA acceptance still requires a cold physical-iPhone check after deployment.
Risk and rollback
Low, isolated presentation-layer change. Revert this PR to restore the previous SVG-child opacity animation.
RAG impact: no retrieval behaviour change.