Uh oh!
There was an error while loading. Please reload this page.
fix(calendar): animate view switch instead of snapping (#295) - #373
Conversation
Warning Review limit reached
Next review available in:48 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. 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 Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughCalendar view rendering now uses reduced-motion-aware Framer Motion transitions. New tests cover loading, Month/Week/Day/Table switching, and prevention of stale view content. ChangesCalendar view transitions
Estimated code review effort: 3 (Moderate) | ~20 minutes 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. Comment |
Deploying with |
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs | frontend-staging | 7e42fe7 | Commit Preview URL Branch Preview URL | Jul 29 2026, 10:11 AM |
Rebase of PR #373 onto current main (~147 commits ahead of the old base). The PR's true diff applied cleanly on top of main's only intervening Calendar change (the #422 test-mode now() seams), so this is the original change re-landed, not a re-implementation: - Wrap the calendar body (skeleton / Month / Week / Day / Table) in AnimatePresence mode="wait" with a motion.div keyed on the load state and active view, so switching views crossfades/slides (0.22s) instead of snapping — mirroring Study.tsx's pattern. - Respect prefers-reduced-motion via useReducedMotion: no initial/exit offset and zero duration when reduced motion is requested (the global CSS rule only covers CSS transitions, not framer's JS animations). - Add Calendar.test.tsx: framer-motion stubbed to a passthrough; asserts skeleton-then-month load, correct body per view toggle, and no leakage between views. Main's now() determinism seams (cursor, today, Today button, dueLabel) are untouched; no testids changed. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
874541c to
a7214caCompareRebase of PR #373 onto current main (~147 commits ahead of the old base). The PR's true diff applied cleanly on top of main's only intervening Calendar change (the #422 test-mode now() seams), so this is the original change re-landed, not a re-implementation: - Wrap the calendar body (skeleton / Month / Week / Day / Table) in AnimatePresence mode="wait" with a motion.div keyed on the load state and active view, so switching views crossfades/slides (0.22s) instead of snapping — mirroring Study.tsx's pattern. - Respect prefers-reduced-motion via useReducedMotion: no initial/exit offset and zero duration when reduced motion is requested (the global CSS rule only covers CSS transitions, not framer's JS animations). - Add Calendar.test.tsx: framer-motion stubbed to a passthrough; asserts skeleton-then-month load, correct body per view toggle, and no leakage between views. Main's now() determinism seams (cursor, today, Today button, dueLabel) are untouched; no testids changed. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…view finding) Calendar is the third framer-motion consumer but lacked the IS_TEST_MODE -> MotionGlobalConfig.skipAnimations gate Study.tsx and HowItWorks.tsx pair with the import (module-side-effect scoped, so a Playwright run landing directly on /calendar would animate for real in the deterministic lane). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
de35e17 to
7e42fe7CompareUh oh!
There was an error while loading. Please reload this page.
Closes#295.
Problem
Switching between the Calendar views (Month / Week / Day / Table) was a jarring, instant hard swap. The body rendered each view as a plain conditional with no transition wrapper (
Calendar.tsx), and because the four layouts have very different heights, content and page height snapped between states.Fix
Wrap the calendar body in
AnimatePresence mode="wait"+ a keyedmotion.div, mirroring the in-repo precedent already used byStudy.tsx(fade + small slide,opacity/y). The body is keyed on the current state (loading ? "loading" : view), so:prefers-reduced-motionis honored via framer'suseReducedMotion— the fade/slide collapses to an instant swap. This is needed because the global CSS reduced-motion rule (globals.css) only neutralizes CSS transitions, not framer's JS-driven animations.No behavioral change to any view's contents — only the swap is wrapped.
Tests
Adds
Calendar.test.tsx(vitest + jsdom, framer stubbed to a passthrough so assertions don't race the 220ms animation):mode="wait"single-child invariant).Verification
vitest run— 94 passed (13 files), including the 6 new casestsc --noEmit— cleaneslint .— 0 errors🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Tests