Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR improves the Privacy dialog’s perceived performance by keeping the dialog mounted in the DOM between open/close cycles, reducing mount/unmount work during animations (aligned with Issue #44’s “mounting stutter/lag” item).
Changes:
- Add
keepMountedto the MUI<Dialog>inPrivacyto avoid teardown/remount between opens.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
algotyrnt
changed the title
keepMounted prop directly to the parent to reduce animation lagPrivacy modal component
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated 6 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <Dialog | ||
| open={open} | ||
| onClose={onClose} | ||
| maxWidth="md" | ||
| fullWidth | ||
| scroll="paper" | ||
| sx={(theme) => ({ | ||
| disableScrollLock | ||
| transitionDuration={{ enter: 300, exit: 200 }} |
There was a problem hiding this comment.
The PR title/Issue #44 mention applying keepMounted on the parent <Dialog> to avoid mount/unmount jank, but the Dialog here still omits keepMounted. Add keepMounted (or justify why it’s not needed) so the modal stays mounted between opens and the performance goal is actually met.
There was a problem hiding this comment.
becous second we close the modal, React completely destroys the entire HTML tree inside of it from global Footer, freeing up your browser's memory footprint entirely.
resolves: #44
This pull request refactors the
Privacymodal component for improved maintainability, consistency, and user experience, and updates theFooterto better handle opening the privacy policy. The changes include extracting style objects for clarity, using MUI'sStackfor layout, and ensuring smoother modal transitions.Refactoring and UI improvements in the Privacy modal:
dialogTitleSx,dialogTitleBoxSx,dialogContentSx,dialogContentBoxSx) for cleaner and more maintainable code inPrivacy.tsx.Boxand manual margin logic with MUI'sStackcomponent for consistent vertical spacing between sections [1] [2].useThemeusage and passed theme values directly for responsive sizing and spacing [1] [2].Footer interaction update:
Footerfrom aLinkto aBoxstyled as a button, and wrapped the modal open action in a React transition for better UI responsiveness [1] [2].