fix(ui): smooth notification drawer slide-in/out#2038
Conversation
The Sheet primitive animated with a blanket 'transition ease-in-out' running alongside the reka enter/exit keyframes, so every property (box-shadow, filter, transform) transitioned each frame and the panel was never promoted to its own compositor layer. Opening the notification drawer then mounted the full tab/list body synchronously, stalling the slide's first frames. - sheet.variants.ts: drop the blanket transition; animate only via the transform/opacity keyframes; add will-change-transform so the slide runs on the compositor; snappier, symmetric timing (300ms open / 200ms close, ease-out/in). - SheetContent.vue: match the overlay fade duration to the panel. - Notifications/Sidebar.vue: defer mounting the tab/list body until a couple frames after open so the panel's first paint is cheap and the slide starts immediately; the body stays mounted through the exit slide. Benefits every Sheet/ResponsiveModal, not just notifications.
|
Warning Review limit reachedYou’ve reached a temporary PR review limit under our Fair Usage Limits Policy. Next review available in: 52 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: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
|
🚀 Storybook has been deployed to staging: https://unraid-ui-storybook-staging.unraid-workers.workers.dev |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #2038 +/- ##
=======================================
Coverage 52.77% 52.78%
=======================================
Files 1035 1035
Lines 72060 72073 +13
Branches 8303 8298 -5
=======================================
+ Hits 38031 38044 +13
Misses 33903 33903
Partials 126 126 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
|
This plugin has been deployed to Cloudflare R2 and is available for testing. |
1 participant
Summary
Smooths the notification drawer (and every other
Sheet/ResponsiveModal) open/close, which was extremely janky on mobile. The fix lives in the design-system primitive (@unraid/uiSheet), not patched only in the notification consumer, so all sheets benefit.Diagnosis
sheet.variants.tsset a blankettransition ease-in-outthat ran alongside reka's enter/exit keyframes — so every property (box-shadow,filter,transform) transitioned each frame, and the panel was never promoted to its own compositor layer.will-changehint.Tabs+ two Apollo-backedNotificationsLists — synchronously, stalling the slide's first frames.Not the cause (ruled out): it was already animating
translate3d(notwidth/left), andSheet.vue's viewport-meta rewrite is benign (the live webgui viewport is alreadywidth=device-width, initial-scale=1, so it only toggles zoom-lock — no reflow).Changes
sheet.variants.ts— drop the blankettransition; animate only via the transform/opacity keyframes; addwill-change-transform(compositor promotion); snappy symmetric timing (300ms open / 200ms close,ease-out/ease-in).SheetContent.vue— match the overlay fade duration to the panel (300/200ms).Notifications/Sidebar.vue— bindv-model:openand defer mounting the tab/list body ~2 frames after open (cheap first paint → slide starts immediately); the body stays mounted through the exit slide, and reka unmounts it with the panel.Design system
The change is in the
@unraid/uiSheetprimitive (design system), so it fixes the animation for all consumers (ResponsiveModalincluded). The existingSheet.stories.tsrenders the improved animation automatically and asserts nothing about timing, so no story changes are needed.pnpm --filter @unraid/ui buildis clean.Testing
Deployed to a 7.3.2 dev server; open/close the notification bell — the slide is smooth and no longer hitches on mount.