tweak(ui): rework the page and pane animations - #5407
Conversation
Add a pane switcher that slides between panes that share a spot on a page. The panes stay in the layout flow, so the page keeps its height, and they slide out to the edge of the screen instead of being cut at the page padding. The persons page uses it for the list and the filters. Add a page transition that fades a page in when the route changes, so opening a person and going back look the same. Both use shared motion tokens and stay still when the visitor asks for reduced motion. The page padding is now a variable, so the container and the animations cannot drift apart.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Approval pendingCodeRabbit has no unresolved comments, but it has not reviewed the latest commit. Use the checkbox below to review the latest commit. CodeRabbit will approve the changes if it finds no blocking issues.
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 |
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
| import { useEffect, useLayoutEffect, useRef, useState } from 'react'; | ||
| import { Box } from '@mui/material'; | ||
| import { PaneSwitcherProps } from './index.types'; |
There was a problem hiding this comment.
🔍 New components bypass UI conventions
PaneSwitcher uses a relative type import, and both components use raw MUI Box. Repository rules require aliases and existing custom wrappers.
Was this helpful? React with 👍 or 👎 to provide feedback.
Nothing slides on the first render, so reserving the tallest pane only made a shorter active pane collapse once the reservation ended. The switch duration now mirrors the motion-base token.
|
1 participant
On mobile the persons page put both panes in
position: absolute, so the wrapper measured 0px tall and the sliding cards were cut 16px inside each screen edge. Opening a person had no animation at all, while going back replayed that same cropped slide.Two reusable pieces replace it:
PaneSwitcher— slides between panes that share a spot on a page. The panes stay in the layout flow, so the container keeps a real height, and they slide out to the edge of the screen instead of the page padding. Used by the persons list and filters.PageTransition— fades a page in on route change, so opening a person and going back look the same on every page.Both use shared motion tokens and stop animating under reduced motion. The page padding became a variable so the container and the animations cannot drift apart.
Type of change