From 6a555f423692836219f0a3fa1cbcbccac31d0265 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 29 Sep 2022 15:44:05 +0300
Subject: [PATCH] fix: fix slow loading times for nodeTypes, node creator vuex
 reference, and pushConnection in settings views

---
 .../src/components/NodeCreator/NodeCreator.vue     | 14 +-------------
 .../editor-ui/src/components/SettingsSidebar.vue   |  5 +++++
 .../src/components/mixins/pushConnection.ts        |  1 +
 packages/editor-ui/src/modules/nodeTypes.ts        |  2 +-
 packages/editor-ui/src/views/CredentialsView.vue   | 11 ++++++++---
 packages/editor-ui/src/views/NodeView.vue          |  5 ++++-
 6 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeCreator/NodeCreator.vue b/packages/editor-ui/src/components/NodeCreator/NodeCreator.vue
index b269b367e4bb4..f15adc8cf7939 100644
--- a/packages/editor-ui/src/components/NodeCreator/NodeCreator.vue
+++ b/packages/editor-ui/src/components/NodeCreator/NodeCreator.vue
@@ -41,14 +41,9 @@ export default Vue.extend({
 	props: [
 		'active',
 	],
-	data() {
-		return {
-			allLatestNodeTypes: [] as INodeTypeDescription[],
-		};
-	},
 	computed: {
 		...mapGetters('users', ['personalizedNodeTypes']),
-		nodeTypes(): INodeTypeDescription[] {
+		allLatestNodeTypes(): INodeTypeDescription[] {
 			return this.$store.getters['nodeTypes/allLatestNodeTypes'];
 		},
 		visibleNodeTypes(): INodeTypeDescription[] {
@@ -107,13 +102,6 @@ export default Vue.extend({
 			}
 		},
 	},
-	watch: {
-		nodeTypes(newList) {
-			if (newList.length !== this.allLatestNodeTypes.length) {
-				this.allLatestNodeTypes = newList;
-			}
-		},
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index ac14f52c04f17..9ade642415dd1 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -56,11 +56,13 @@ import mixins from 'vue-typed-mixins';
 import { mapGetters } from 'vuex';
 import { ABOUT_MODAL_KEY, VERSIONS_MODAL_KEY, VIEWS } from '@/constants';
 import { userHelpers } from './mixins/userHelpers';
+import { pushConnection } from "@/components/mixins/pushConnection";
 import { IFakeDoor } from '@/Interface';
 import GiftNotificationIcon from './GiftNotificationIcon.vue';
 
 export default mixins(
 	userHelpers,
+	pushConnection,
 ).extend({
 	name: 'SettingsSidebar',
 	components: {
@@ -95,6 +97,9 @@ export default mixins(
 			this.$store.dispatch('ui/openModal', VERSIONS_MODAL_KEY);
 		},
 	},
+	mounted() {
+		this.pushConnect();
+	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/mixins/pushConnection.ts b/packages/editor-ui/src/components/mixins/pushConnection.ts
index ac4c7dad8919a..d747c6d69e111 100644
--- a/packages/editor-ui/src/components/mixins/pushConnection.ts
+++ b/packages/editor-ui/src/components/mixins/pushConnection.ts
@@ -366,6 +366,7 @@ export const pushConnection = mixins(
 
 					this.processWaitingPushMessages();
 				} else if (receivedData.type === 'reloadNodeType') {
+					this.$store.dispatch('nodeTypes/getNodeTypes');
 					this.$store.dispatch('nodeTypes/getFullNodesProperties', [receivedData.data]);
 				} else if (receivedData.type === 'removeNodeType') {
 					const pushData = receivedData.data;
diff --git a/packages/editor-ui/src/modules/nodeTypes.ts b/packages/editor-ui/src/modules/nodeTypes.ts
index 2df865d97782b..1f0a35f3eebf9 100644
--- a/packages/editor-ui/src/modules/nodeTypes.ts
+++ b/packages/editor-ui/src/modules/nodeTypes.ts
@@ -57,7 +57,7 @@ const module: Module<INodeTypesState, IRootState> = {
 		},
 	},
 	mutations: {
-		setNodeTypes(state, newNodeTypes: INodeTypeDescription[]) {
+		setNodeTypes(state, newNodeTypes: INodeTypeDescription[] = []) {
 			const nodeTypes = newNodeTypes.reduce<Record<string, Record<string, INodeTypeDescription>>>((acc, newNodeType) => {
 				const newNodeVersions = getNodeVersions(newNodeType);
 
diff --git a/packages/editor-ui/src/views/CredentialsView.vue b/packages/editor-ui/src/views/CredentialsView.vue
index f0e1fb4aae4e6..00de72a2319f0 100644
--- a/packages/editor-ui/src/views/CredentialsView.vue
+++ b/packages/editor-ui/src/views/CredentialsView.vue
@@ -393,11 +393,16 @@ export default mixins(
 			});
 		},
 		async initialize() {
-			await Promise.all([
+			const loadPromises = [
 				this.$store.dispatch('credentials/fetchAllCredentials'),
 				this.$store.dispatch('credentials/fetchCredentialTypes'),
-				this.$store.dispatch('nodeTypes/getNodeTypes'),
-			]);
+			];
+
+			if (this.$store.getters['nodeTypes/allNodeTypes'].length === 0) {
+				loadPromises.push(this.$store.dispatch('nodeTypes/getNodeTypes'));
+			}
+
+			await Promise.all(loadPromises);
 
 			this.loading = false;
 			this.$nextTick(this.focusSearchInput);
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 34d85399ba41d..0c21c868a57e3 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -3125,9 +3125,12 @@ export default mixins(
 				this.loadActiveWorkflows(),
 				this.loadCredentials(),
 				this.loadCredentialTypes(),
-				this.loadNodeTypes(),
 			];
 
+			if (this.$store.getters['nodeTypes/allNodeTypes'].length === 0) {
+				loadPromises.push(this.loadNodeTypes());
+			}
+
 			try {
 				await Promise.all(loadPromises);
 			} catch (error) {