fix: performance

frontend/src/app/canvas/CanvasPage.tsx

@@ -188,8 +188,21 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
   const [isSelecting, setIsSelecting] = React.useState(false)
   const [ariaAnnouncement, setAriaAnnouncement] = React.useState<string | null>(null)
   const [fullscreenNodeId, setFullscreenNodeId] = React.useState<string | null>(null)
+
+  const graphApplyTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+  const GRAPH_APPLY_DEBOUNCE_MS = 300
   useEffect(() => {
-    dispatchCanvasCommand({ type: 'graph/apply', payload: { nodes, edges } })
+    if (graphApplyTimeoutRef.current) clearTimeout(graphApplyTimeoutRef.current)
+    graphApplyTimeoutRef.current = setTimeout(() => {
+      graphApplyTimeoutRef.current = null
+      dispatchCanvasCommand({ type: 'graph/apply', payload: { nodes, edges } })
+    }, GRAPH_APPLY_DEBOUNCE_MS)
+    return () => {
+      if (graphApplyTimeoutRef.current) {
+        clearTimeout(graphApplyTimeoutRef.current)
+        graphApplyTimeoutRef.current = null
+      }
+    }
   }, [nodes, edges])
 
   const connectionPath = useCanvasConnectionPathFromStore()
@@ -218,7 +231,22 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
         rafRef.current = requestAnimationFrame(() => {
           rafRef.current = null
           const toApply = pendingChangesRef.current.splice(0, pendingChangesRef.current.length)
-          if (toApply.length > 0) setNodesSilent((nds) => applyNodeChanges(toApply, nds))
+          if (toApply.length === 0) return
+          setNodesSilent((nds) => {
+            // Drop dimension-only changes that don't change the node (e.g. React Flow re-reporting on visibility).
+            // Avoids graph/apply and store churn when nodes become visible with onlyRenderVisibleElements.
+            const filtered = toApply.filter((c) => {
+              const ch = c as NodeChange<Node> & { type?: string; dimensions?: { width?: number; height?: number } }
+              if (ch.type !== 'dimensions' || ch.dimensions == null) return true
+              const node = nds.find((n) => n.id === (ch as { id?: string }).id)
+              if (!node) return true
+              const nw = (node as Node & { width?: number }).width
+              const nh = (node as Node & { height?: number }).height
+              return nw !== ch.dimensions.width || nh !== ch.dimensions.height
+            })
+            if (filtered.length === 0) return nds
+            return applyNodeChanges(filtered, nds)
+          })
         })
       }
     },