Layout refresh latency bug revised

frontend/canvas.html

@@ -3760,6 +3760,8 @@ Organization : OptiHK Limited
 
       const initializedRef = useRef(false);
       const canvasViewportRef = useRef(null);
+      const buildLayoutRequestRef = useRef(0);
+      const buildLayoutBusyRef = useRef(false);
       const edgeTypes = useMemo(() => ({ parallelRoute: ParallelRouteEdge }), []);
 
       const activePage = useMemo(() => pages.find(p => p.id === activePageId) || null, [pages, activePageId]);
@@ -6208,49 +6210,64 @@ ${bundlesBlock}`;
       // Save the active page, generate layout preview assets, and show the preview tab.
       const handleBuildLayout = useCallback(async () => {
         if (!activePage) return;
-        if (buildLayoutBusy) return;
+        if (buildLayoutBusyRef.current) return;
         if (!validateRouteCrossings(activePage)) return;
+        const buildPage = activePage;
+        const buildRequestId = buildLayoutRequestRef.current + 1;
+        buildLayoutRequestRef.current = buildRequestId;
+        buildLayoutBusyRef.current = true;
         setBuildLayoutBusy(true);
         startBuildProgress('Building layout');
-        const yamlContent = buildYamlForPage(activePage);
+        const yamlContent = buildYamlForPage(buildPage);
+        const layoutBounds = calculateLayoutBounds(buildPage);
 
         // send to backend      
         try {
           const response = await fetch('/api/save-layout', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
+            cache: 'no-store',
             body: JSON.stringify({
               project: currentProjectName,
-              cell: activePage.name,
+              cell: buildPage.name,
               content: yamlContent,
             }),
           });
 
           if (!response.ok) {
-            const errData = await response.json();
+            const errData = await response.json().catch(() => ({}));
+            if (buildRequestId !== buildLayoutRequestRef.current) return;
             addLog(errData.error || 'Save failed, unknown error');
             stopBuildProgress();
             return;
           }
 
           const result = await response.json();
+          if (buildRequestId !== buildLayoutRequestRef.current) return;
           addLog('Successfully saved: ' + result.path);
           if (result.preview_error) {
             addLog('Preview skipped: ' + result.preview_error);
           }
-          if (result.svg_url) {
+          if (result.svg_ready && result.svg_url) {
             completeBuildProgress('Layout ready');
-            openLayoutPreview(activePage.name, result.svg_url, calculateLayoutBounds(activePage));
+            openLayoutPreview(buildPage.name, result.svg_url, layoutBounds);
           } else {
+            if (result.preview_status === 'generated') {
+              addLog('Layout SVG was not marked ready by the backend.');
+            }
             completeBuildProgress('Layout saved');
           }
         } catch (err) {
+          if (buildRequestId !== buildLayoutRequestRef.current) return;
           addLog('Save error: ' + err.message);
           stopBuildProgress();
         } finally {
-          setBuildLayoutBusy(false);
+          if (buildRequestId === buildLayoutRequestRef.current) {
+            buildLayoutBusyRef.current = false;
+            setBuildLayoutBusy(false);
+          }
         }
-      }, [activePage, buildLayoutBusy, buildYamlForPage, currentProjectName, addLog, openLayoutPreview, validateRouteCrossings, startBuildProgress, completeBuildProgress, stopBuildProgress]);
+      }, [activePage, buildYamlForPage, currentProjectName, addLog, openLayoutPreview, validateRouteCrossings, startBuildProgress, completeBuildProgress, stopBuildProgress]);
 
       // Save YAML for every editable project/composite page without opening previews.
       const handleSaveProjectLayouts = useCallback(async () => {