From fa31c0c7b64d0126d82a165d5cacaafd073013ba Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Date: Sat, 7 Aug 2021 09:35:59 +0200
Subject: [PATCH] :bug: Fix UI blocking with large workflows (#2053)

* fix reactivity bug

* Clean up props

* add comma

* clean up, reduce reactivity more

* ts issues
---
 packages/editor-ui/src/components/Node.vue     | 18 +++++++++++++-----
 .../src/components/mixins/nodeBase.ts          |  1 +
 packages/editor-ui/src/views/NodeView.vue      |  1 +
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index fd17eaea9e..22bb4ed800 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -125,22 +125,30 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 				return 'play';
 			}
 		},
-		nodeSubtitle (): string | undefined {
-			return this.getNodeSubtitle(this.data, this.nodeType, this.workflow);
-		},
 		workflowRunning (): boolean {
 			return this.$store.getters.isActionActive('workflowRunning');
 		},
-		workflow () {
-			return this.getWorkflow();
+	},
+	watch: {
+		isActive(newValue, oldValue) {
+			if (!newValue && oldValue) {
+				this.setSubtitle();
+			}
 		},
 	},
+	mounted() {
+		this.setSubtitle();
+	},
 	data () {
 		return {
 			isTouchActive: false,
+			nodeSubtitle: '',
 		};
 	},
 	methods: {
+		setSubtitle() {
+			this.nodeSubtitle = this.getNodeSubtitle(this.data, this.nodeType, this.getWorkflow()) || '';
+		},
 		disableNode () {
 			this.disableNodes([this.data]);
 		},
diff --git a/packages/editor-ui/src/components/mixins/nodeBase.ts b/packages/editor-ui/src/components/mixins/nodeBase.ts
index bc8c3b1cc0..d687a2fd09 100644
--- a/packages/editor-ui/src/components/mixins/nodeBase.ts
+++ b/packages/editor-ui/src/components/mixins/nodeBase.ts
@@ -57,6 +57,7 @@ export const nodeBase = mixins(
 		'nodeId',
 		'instance',
 		'isReadOnly',
+		'isActive',
 	],
 	methods: {
 		__addNode (node: INodeUi) {
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 10a7997424..a2178fb950 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -26,6 +26,7 @@
 				:name="nodeData.name"
 				:isReadOnly="isReadOnly"
 				:instance="instance"
+				:isActive="!!activeNode && activeNode.name === nodeData.name"
 				></node>
 			</div>
 		</div>