diff --git a/CHANGELOG.md b/CHANGELOG.md index 904a19e4..d7a755d0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ and this project adheres to - 🐛(backend) create a link_trace record for on-boarding documents - 🐛(backend) manage race condition when creating sandbox document +- 🐛(frontend) fix flickering left panel #1989 - ♿️(frontend) improve doc tree keyboard navigation #1981 ## [v4.7.0] - 2026-03-09 diff --git a/src/frontend/apps/impress/src/features/left-panel/components/ResizableLeftPanel.tsx b/src/frontend/apps/impress/src/features/left-panel/components/ResizableLeftPanel.tsx index 2922c662..03584d1d 100644 --- a/src/frontend/apps/impress/src/features/left-panel/components/ResizableLeftPanel.tsx +++ b/src/frontend/apps/impress/src/features/left-panel/components/ResizableLeftPanel.tsx @@ -45,6 +45,22 @@ export const ResizableLeftPanel = ({ ); }); + const [isMounting, setIsMounting] = useState(false); + + /** + * To avoid flickering animation on initial load + */ + useEffect(() => { + const timeout = setTimeout(() => { + setIsMounting(true); + }, 500); + + return () => { + clearTimeout(timeout); + setIsMounting(false); + }; + }, []); + /** * When the panel is toggled open/closed, we want * to either expand/collapse @@ -94,9 +110,10 @@ export const ResizableLeftPanel = ({ collapsible={!isPanelOpen} collapsedSize={0} style={{ - transition: isDragging - ? 'none' - : 'flex var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out)', + transition: + isDragging || !isMounting + ? 'none' + : 'flex var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out)', }} order={0} defaultSize={