🐛 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

@@ -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]);
 		},

packages/editor-ui/src/components/mixins/nodeBase.ts

@@ -57,6 +57,7 @@ export const nodeBase = mixins(
 		'nodeId',
 		'instance',
 		'isReadOnly',
+		'isActive',
 	],
 	methods: {
 		__addNode (node: INodeUi) {

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>