fix(editor): Clean up NDV RunData loading states (#20082)

packages/frontend/@n8n/i18n/src/locales/en.json

@@ -1958,8 +1958,6 @@
 	"runData.aiContentBlock.tokens": "{count} Tokens",
 	"runData.aiContentBlock.tokens.prompt": "Prompt:",
 	"runData.aiContentBlock.tokens.completion": "Completion:",
-	"runData.trimmedData.title": "No data yet",
-	"runData.trimmedData.message": "Data will be available here once the execution has finished.",
 	"runData.trimmedData.loading": "Loading data",
 	"runData.panel.actions.collapse": "Collapse panel",
 	"runData.panel.actions.open": "Open panel",

packages/frontend/editor-ui/src/components/InputPanel.vue

@@ -574,6 +574,7 @@ function handleChangeCollapsingColumn(columnName: string | null) {
 						telemetry-source="inputs"
 						data-test-id="execute-previous-node"
 						tooltip-placement="bottom"
+						:show-loading-spinner="false"
 						@execute="onNodeExecute"
 					>
 						<template

packages/frontend/editor-ui/src/components/NodeExecuteButton.vue

@@ -52,11 +52,13 @@ const props = withDefaults(
 		hideLabel?: boolean;
 		tooltip?: string;
 		tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
+		showLoadingSpinner?: boolean;
 	}>(),
 	{
 		disabled: false,
 		transparent: false,
 		square: false,
+		showLoadingSpinner: true,
 	},
 );
 
@@ -402,8 +404,8 @@ async function onClick() {
 		</template>
 		<N8nButton
 			v-bind="$attrs"
-			:loading="isLoading"
-			:disabled="disabled || !!disabledHint"
+			:loading="isLoading && showLoadingSpinner"
+			:disabled="disabled || !!disabledHint || (isLoading && !showLoadingSpinner)"
 			:label="buttonLabel"
 			:type="type"
 			:size="size"

packages/frontend/editor-ui/src/components/OutputPanel.vue

@@ -410,9 +410,14 @@ function handleChangeCollapsingColumn(columnName: string | null) {
 			</template>
 
 			<template v-else>
-				<N8nText v-if="workflowRunning && !isTriggerNode" data-test-id="ndv-output-waiting">{{
-					i18n.baseText('ndv.output.waitingToRun')
-				}}</N8nText>
+				<div v-if="workflowRunning && !isTriggerNode" data-test-id="ndv-output-waiting">
+					<div :class="$style.spinner">
+						<N8nSpinner type="ring" />
+					</div>
+					<N8nText>
+						{{ i18n.baseText('ndv.output.waitingToRun') }}
+					</N8nText>
+				</div>
 				<N8nText v-if="!workflowRunning" data-test-id="ndv-output-run-node-hint">
 					<template v-if="isSubNodeType">
 						{{ i18n.baseText('ndv.output.runNodeHintSubNode') }}
@@ -523,4 +528,16 @@ function handleChangeCollapsingColumn(columnName: string | null) {
 	font-size: var(--font-size-s);
 	font-weight: var(--font-weight-regular);
 }
+
+.spinner {
+	display: flex;
+	justify-content: center;
+	margin-bottom: var(--ndv-spacing);
+
+	* {
+		color: var(--color-primary);
+		min-height: 40px;
+		min-width: 40px;
+	}
+}
 </style>

packages/frontend/editor-ui/src/components/RunData.vue

@@ -77,7 +77,6 @@ import {
 } from '@n8n/design-system';
 import { storeToRefs } from 'pinia';
 import { useRoute } from 'vue-router';
-import { useUIStore } from '@/stores/ui.store';
 import { useSchemaPreviewStore } from '@/stores/schemaPreview.store';
 import { asyncComputed } from '@vueuse/core';
 import ViewSubExecution from './ViewSubExecution.vue';
@@ -234,7 +233,6 @@ const ndvStore = useNDVStore();
 const workflowsStore = useWorkflowsStore();
 const sourceControlStore = useSourceControlStore();
 const rootStore = useRootStore();
-const uiStore = useUIStore();
 const schemaPreviewStore = useSchemaPreviewStore();
 const posthogStore = usePostHog();
 
@@ -1664,6 +1662,18 @@ defineExpose({ enterEditMode });
 				<N8nText>{{ executingMessage }}</N8nText>
 			</div>
 
+			<div
+				v-else-if="isTrimmedManualExecutionDataItem"
+				:class="[$style.center, $style.executingMessage]"
+			>
+				<div v-if="!props.compact" :class="$style.spinner">
+					<N8nSpinner type="ring" />
+				</div>
+				<N8nText>
+					{{ i18n.baseText('runData.trimmedData.loading') }}
+				</N8nText>
+			</div>
+
 			<div v-else-if="editMode.enabled" :class="$style.editMode">
 				<div :class="[$style.editModeBody, 'ignore-key-press-canvas']">
 					<JsonEditor
@@ -1719,24 +1729,6 @@ defineExpose({ enterEditMode });
 				</N8nText>
 			</div>
 
-			<div
-				v-else-if="isTrimmedManualExecutionDataItem && uiStore.isProcessingExecutionResults"
-				:class="$style.center"
-			>
-				<div :class="$style.spinner"><N8nSpinner type="ring" /></div>
-				<N8nText color="text-dark" size="large">
-					{{ i18n.baseText('runData.trimmedData.loading') }}
-				</N8nText>
-			</div>
-
-			<NDVEmptyState
-				v-else-if="isTrimmedManualExecutionDataItem"
-				:class="$style.center"
-				:title="i18n.baseText('runData.trimmedData.title')"
-			>
-				{{ i18n.baseText('runData.trimmedData.message') }}
-			</NDVEmptyState>
-
 			<div v-else-if="hasNodeRun && isArtificialRecoveredEventItem" :class="$style.center">
 				<slot name="recovered-artificial-output-data"></slot>
 			</div>