feat(editor): Add node execution waiting state to new canvas (no-changelog) (#11083)

packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.spec.ts

@@ -190,6 +190,19 @@ describe('CanvasNodeDefault', () => {
 		});
 	});
 
+	describe('waiting', () => {
+		it('should apply waiting class when node is waiting', () => {
+			const { getByText } = renderComponent({
+				global: {
+					provide: {
+						...createCanvasNodeProvide({ data: { execution: { running: true, waiting: '123' } } }),
+					},
+				},
+			});
+			expect(getByText('Test Node').closest('.node')).toHaveClass('waiting');
+		});
+	});
+
 	describe('running', () => {
 		it('should apply running class when node is running', () => {
 			const { getByText } = renderComponent({

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

@@ -25,6 +25,8 @@ const {
 	isDisabled,
 	isSelected,
 	hasPinnedData,
+	executionStatus,
+	executionWaiting,
 	executionRunning,
 	hasRunData,
 	hasIssues,
@@ -53,6 +55,7 @@ const classes = computed(() => {
 		[$style.success]: hasRunData.value,
 		[$style.error]: hasIssues.value,
 		[$style.pinned]: hasPinnedData.value,
+		[$style.waiting]: executionWaiting.value ?? executionStatus.value === 'waiting',
 		[$style.running]: executionRunning.value,
 		[$style.configurable]: renderOptions.value.configurable,
 		[$style.configuration]: renderOptions.value.configuration,
@@ -244,6 +247,10 @@ function openContextMenu(event: MouseEvent) {
 		background-color: var(--color-node-executing-background);
 		border-color: var(--color-canvas-node-running-border-color, var(--color-node-running-border));
 	}
+
+	&.waiting {
+		border-color: var(--color-canvas-node-waiting-border-color, var(--color-secondary));
+	}
 }
 
 .description {

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

@@ -86,6 +86,10 @@ const hideNodeIssues = computed(() => false); // @TODO Implement this
 	color: var(--color-success);
 }
 
+.waiting {
+	color: var(--color-secondary);
+}
+
 .pinnedData {
 	color: var(--color-secondary);
 }