fix(editor): Show node executing status shortly before switching to s…

…uccess on new canvas (#11675)

packages/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue

@@ -12,7 +12,7 @@ const {
 	hasIssues,
 	executionStatus,
 	executionWaiting,
-	executionRunning,
+	executionRunningThrottled,
 	hasRunData,
 	runDataIterations,
 	isDisabled,
@@ -58,7 +58,7 @@ const hideNodeIssues = computed(() => false); // @TODO Implement this
 		<!-- Do nothing, unknown means the node never executed -->
 	</div>
 	<div
-		v-else-if="executionRunning || executionStatus === 'running'"
+		v-else-if="executionRunningThrottled || executionStatus === 'running'"
 		data-test-id="canvas-node-status-running"
 		:class="[$style.status, $style.running]"
 	>

packages/editor-ui/src/composables/useCanvasNode.ts

@@ -7,6 +7,7 @@ import { CanvasNodeKey } from '@/constants';
 import { computed, inject } from 'vue';
 import type { CanvasNodeData } from '@/types';
 import { CanvasNodeRenderType, CanvasConnectionMode } from '@/types';
+import { refThrottled } from '@vueuse/core';
 
 export function useCanvasNode() {
 	const node = inject(CanvasNodeKey);
@@ -58,6 +59,7 @@ export function useCanvasNode() {
 	const executionStatus = computed(() => data.value.execution.status);
 	const executionWaiting = computed(() => data.value.execution.waiting);
 	const executionRunning = computed(() => data.value.execution.running);
+	const executionRunningThrottled = refThrottled(executionRunning, 300);
 
 	const runDataOutputMap = computed(() => data.value.runData.outputMap);
 	const runDataIterations = computed(() => data.value.runData.iterations);
@@ -89,6 +91,7 @@ export function useCanvasNode() {
 		executionStatus,
 		executionWaiting,
 		executionRunning,
+		executionRunningThrottled,
 		render,
 		eventBus,
 	};