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