From a81fdca7bfb7593f742ca95b3705f52b71e09bea Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Date: Thu, 27 Jul 2023 13:00:22 +0200
Subject: [PATCH] fix: Allow pasting a big workflow (#6760)

* fix: pasting a big workflow

* chore: update comment

* refactor: move try/catch to function

* refactor: move try/catch to function
---
 packages/editor-ui/src/components/Node.vue | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index d5ce834799..08ca458cc0 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -502,7 +502,9 @@ export default defineComponent({
 		}
 	},
 	mounted() {
-		this.setSubtitle();
+		setTimeout(() => {
+			this.setSubtitle();
+		}, 0);
 		if (this.nodeRunData) {
 			setTimeout(() => {
 				this.$emit('run', {
@@ -539,10 +541,18 @@ export default defineComponent({
 			this.unwatchWorkflowDataItems();
 		},
 		setSubtitle() {
-			const nodeSubtitle =
-				this.getNodeSubtitle(this.data, this.nodeType, this.getCurrentWorkflow()) || '';
+			// why is this not a computed property? because it's a very expensive operation
+			// it requires expressions to resolve each subtitle...
+			// and ends up bogging down the UI with big workflows, for example when pasting a workflow or even opening a node...
+			// so we only update it when necessary (when node is mounted and when it's opened and closed (isActive))
+			try {
+				const nodeSubtitle =
+					this.getNodeSubtitle(this.data, this.nodeType, this.getCurrentWorkflow()) || '';
 
-			this.nodeSubtitle = nodeSubtitle.includes(CUSTOM_API_CALL_KEY) ? '' : nodeSubtitle;
+				this.nodeSubtitle = nodeSubtitle.includes(CUSTOM_API_CALL_KEY) ? '' : nodeSubtitle;
+			} catch (e) {
+				// avoid breaking UI if expression error occurs
+			}
 		},
 		disableNode() {
 			if (this.data !== null) {