From c51a884617bc87b0a0c3418085567cef85b12d5d Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 8 May 2025 11:03:01 +0300
Subject: [PATCH] fix(editor): Ensure editor state updates during execution by
 using throttle instead of debounce (no-changelog) (#15133)

---
 .../src/components/canvas/WorkflowCanvas.test.ts       |  9 ++++-----
 .../editor-ui/src/components/canvas/WorkflowCanvas.vue | 10 +++++-----
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/editor-ui/src/components/canvas/WorkflowCanvas.test.ts b/packages/frontend/editor-ui/src/components/canvas/WorkflowCanvas.test.ts
index 5eeffd8ea2..096cc3549a 100644
--- a/packages/frontend/editor-ui/src/components/canvas/WorkflowCanvas.test.ts
+++ b/packages/frontend/editor-ui/src/components/canvas/WorkflowCanvas.test.ts
@@ -20,7 +20,7 @@ vi.mock('@vueuse/core', async () => {
 	const actual = await vi.importActual('@vueuse/core');
 	return {
 		...actual,
-		debouncedRef: vi.fn(actual.debouncedRef as typeof vueuse.debouncedRef),
+		throttledRef: vi.fn(actual.throttledRef as typeof vueuse.throttledRef),
 	};
 });
 
@@ -161,15 +161,14 @@ describe('WorkflowCanvas', () => {
 				},
 			});
 
-			expect(vueuse.debouncedRef).toHaveBeenCalledTimes(2);
+			expect(vueuse.throttledRef).toHaveBeenCalledTimes(2);
 
 			// Find calls related to our specific debouncing logic
-			const calls = vi.mocked(vueuse.debouncedRef).mock.calls;
-			const executingCalls = calls.filter((call) => call[1] === 200 && call[2]?.maxWait === 50);
+			const calls = vi.mocked(vueuse.throttledRef).mock.calls;
+			const executingCalls = calls.filter((call) => call[1] === 200);
 
 			expect(executingCalls.length).toBeGreaterThanOrEqual(2);
 			expect(executingCalls[0][1]).toBe(200);
-			expect(executingCalls[0][2]).toEqual({ maxWait: 50 });
 		});
 	});
 });
diff --git a/packages/frontend/editor-ui/src/components/canvas/WorkflowCanvas.vue b/packages/frontend/editor-ui/src/components/canvas/WorkflowCanvas.vue
index c4a28527b9..5754ba05bb 100644
--- a/packages/frontend/editor-ui/src/components/canvas/WorkflowCanvas.vue
+++ b/packages/frontend/editor-ui/src/components/canvas/WorkflowCanvas.vue
@@ -8,7 +8,7 @@ import type { EventBus } from '@n8n/utils/event-bus';
 import { createEventBus } from '@n8n/utils/event-bus';
 import type { CanvasEventBusEvents } from '@/types';
 import { useVueFlow } from '@vue-flow/core';
-import { debouncedRef } from '@vueuse/core';
+import { throttledRef } from '@vueuse/core';
 
 defineOptions({
 	inheritAttrs: false,
@@ -61,8 +61,8 @@ onNodesInitialized(() => {
 	}
 });
 
-const mappedNodesDebounced = debouncedRef(mappedNodes, 200, { maxWait: 50 });
-const mappedConnectionsDebounced = debouncedRef(mappedConnections, 200, { maxWait: 50 });
+const mappedNodesThrottled = throttledRef(mappedNodes, 200);
+const mappedConnectionsThrottled = throttledRef(mappedConnections, 200);
 </script>
 
 <template>
@@ -71,8 +71,8 @@ const mappedConnectionsDebounced = debouncedRef(mappedConnections, 200, { maxWai
 			<Canvas
 				v-if="workflow"
 				:id="id"
-				:nodes="executing ? mappedNodesDebounced : mappedNodes"
-				:connections="executing ? mappedConnectionsDebounced : mappedConnections"
+				:nodes="executing ? mappedNodesThrottled : mappedNodes"
+				:connections="executing ? mappedConnectionsThrottled : mappedConnections"
 				:event-bus="eventBus"
 				:read-only="readOnly"
 				v-bind="$attrs"