fix(ui): prevent sidebar flicker on initial load across breakpoints #15051
Conversation
aldoprogrammer
requested review from
AlessioGr,
JarrodMFlesch and
jacobsfletch
as code owners
aldoprogrammer
changed the title
There was a problem hiding this comment.
Pull request overview
This PR fixes a sidebar flicker issue that occurred during initial page load in the Admin UI. The flicker was caused by responsive breakpoint logic triggering an unintended setNavOpen(false) call during hydration, causing the sidebar to briefly open and immediately close.
Key Changes:
- Modified sidebar initialization to check viewport size before setting initial state
- Removed large breakpoint condition from the resize effect to prevent forced closure during hydration
- Updated NavToggler to use medium and small breakpoints instead of large breakpoint for preference setting logic
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/ui/src/elements/Nav/context.tsx | Updated navOpen initialization to check viewport on mount and removed largeBreak from resize effect |
| packages/ui/src/elements/Nav/NavToggler/index.tsx | Changed breakpoint detection from large to medium/small for user preference logic |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const [navOpen, setNavOpen] = React.useState(() => { | ||
| if (typeof window === 'undefined') { | ||
| return initialIsOpen | ||
| } | ||
|
|
||
| const shouldCloseForViewport = window.matchMedia('(max-width: 1024px)').matches | ||
| return shouldCloseForViewport ? false : initialIsOpen | ||
| }) |
There was a problem hiding this comment.
The hardcoded breakpoint value '1024px' creates a magic number that could become inconsistent with the breakpoint system used elsewhere in the codebase. Consider extracting this value to a shared constant or deriving it from the same breakpoint configuration used by largeBreak, midBreak, and smallBreak.
2 participants
What
Fixes a brief sidebar open/close flicker that occurs on page refresh in the Admin UI.
Why
On initial page load, responsive breakpoint logic was triggering a forced
setNavOpen(false)during hydration.This caused the sidebar to briefly open and immediately close, resulting in a visible flicker regardless of collection size or data volume.
How
Prevents unintended state mutation during the initial mount by ensuring responsive sidebar logic only runs after hydration.
This stabilizes the sidebar state on refresh while preserving existing responsive behavior on viewport changes.
Verification
Closes #15032