Merge pull request #5986 from overleaf/jel-detach-stop-compile

Stop compile when detach layout selected

GitOrigin-RevId: 27516373a5d4069c42596e422b564e0873564b63

services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.js

@@ -7,6 +7,7 @@ import IconChecked from '../../../shared/components/icon-checked'
 import ControlledDropdown from '../../../shared/components/controlled-dropdown'
 import IconEditorOnly from './icon-editor-only'
 import IconPdfOnly from './icon-pdf-only'
+import { useCompileContext } from '../../../shared/context/compile-context'
 import { useLayoutContext } from '../../../shared/context/layout-context'
 import * as eventTracking from '../../../infrastructure/event-tracking'
 
@@ -54,10 +55,13 @@ function LayoutDropdownButton() {
     pdfLayout,
   } = useLayoutContext(layoutContextPropTypes)
 
+  const { stopCompile } = useCompileContext()
+
   const handleDetach = useCallback(() => {
     detach()
+    stopCompile()
     eventTracking.sendMB('project-layout-detach')
-  }, [detach])
+  }, [detach, stopCompile])
 
   const handleReattach = useCallback(() => {
     if (detachRole !== 'detacher') {