From b0ba24cbbc55cebc26e9f62ead7396c4c8fbd062 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 11 Nov 2024 14:58:26 +0200
Subject: [PATCH] fix(editor): Show node executing status shortly before
 switching to success on new canvas (#11675)

---
 .../nodes/render-types/parts/CanvasNodeStatusIcons.vue        | 4 ++--
 packages/editor-ui/src/composables/useCanvasNode.ts           | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue
index b3413183dd..a095d84e0b 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue
+++ b/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]"
 	>
diff --git a/packages/editor-ui/src/composables/useCanvasNode.ts b/packages/editor-ui/src/composables/useCanvasNode.ts
index 56b27264ba..6b051992fb 100644
--- a/packages/editor-ui/src/composables/useCanvasNode.ts
+++ b/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,
 	};