Merge pull request #33219 from overleaf/bg-fix-collapsible-panel-flicker

Fix flicker when switching between editor and PDF views

GitOrigin-RevId: 1f6543c0046dc458fa174aa9b54985934a7437fa

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<ImperativePanelHandle>
 ) {
-  // 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) {