From 7f7556cf6a2bb3ccdda12dd37bcf5df0a7a15cd1 Mon Sep 17 00:00:00 2001 From: Brian Gough Date: Thu, 30 Apr 2026 10:25:07 +0100 Subject: [PATCH] Merge pull request #33219 from overleaf/bg-fix-collapsible-panel-flicker Fix flicker when switching between editor and PDF views GitOrigin-RevId: 1f6543c0046dc458fa174aa9b54985934a7437fa --- .../js/features/ide-react/hooks/use-collapsible-panel.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/services/web/frontend/js/features/ide-react/hooks/use-collapsible-panel.ts b/services/web/frontend/js/features/ide-react/hooks/use-collapsible-panel.ts index bc87a3e6fa..e4b4157dad 100644 --- a/services/web/frontend/js/features/ide-react/hooks/use-collapsible-panel.ts +++ b/services/web/frontend/js/features/ide-react/hooks/use-collapsible-panel.ts @@ -1,12 +1,14 @@ -import { RefObject, useEffect } from 'react' +import { RefObject, useLayoutEffect } from 'react' import { ImperativePanelHandle } from 'react-resizable-panels' export default function useCollapsiblePanel( panelIsOpen: boolean, panelRef: RefObject ) { - // collapse the panel when it is toggled closed (including on initial layout) - useEffect(() => { + // useLayoutEffect keeps the panel-size update in the same paint cycle as the + // CSS class changes that show/hide the panel content, eliminating a visible + // flash between the two changes. + useLayoutEffect(() => { const panelHandle = panelRef.current if (panelHandle) {