[FIX] Race condition on the loading of Apps on the admin page (#13587)

packages/rocketchat-apps/client/admin/apps.js

@@ -34,25 +34,29 @@ const tagAlreadyInstalledApps = (installedApps, apps) => {
 };
 
 const getApps = (instance) => {
-	instance.isLoading.set(true);
-
 	fetch(`${ HOST }/v1/apps?version=${ Info.marketplaceApiVersion }`)
 		.then((response) => response.json())
 		.then((data) => {
 			const tagged = tagAlreadyInstalledApps(instance.installedApps.get(), data);
 
-			instance.isLoading.set(false);
-			instance.apps.set(tagged);
-			instance.ready.set(true);
+			if (instance.searchType.get() === 'marketplace') {
+				instance.apps.set(tagged);
+				instance.isLoading.set(false);
+				instance.ready.set(true);
+			}
 		});
 };
 
 const getInstalledApps = (instance) => {
-
 	APIClient.get('apps').then((data) => {
 		const apps = data.apps.map((app) => ({ latest: app }));
-
 		instance.installedApps.set(apps);
+
+		if (instance.searchType.get() === 'installed') {
+			instance.apps.set(apps);
+			instance.isLoading.set(false);
+			instance.ready.set(true);
+		}
 	});
 };
 
@@ -68,9 +72,16 @@ Template.apps.onCreated(function() {
 	this.limit = new ReactiveVar(0);
 	this.page = new ReactiveVar(0);
 	this.end = new ReactiveVar(false);
-	this.isLoading = new ReactiveVar(false);
+	this.isLoading = new ReactiveVar(true);
 	this.searchType = new ReactiveVar('marketplace');
 
+	const queryTab = FlowRouter.getQueryParam('tab');
+	if (queryTab) {
+		if (queryTab.toLowerCase() === 'installed') {
+			this.searchType.set('installed');
+		}
+	}
+
 	getApps(instance);
 	getInstalledApps(instance);
 
@@ -203,9 +214,7 @@ Template.apps.helpers({
 	tabsData() {
 		const instance = Template.instance();
 
-		const {
-			searchType,
-		} = instance;
+		const { searchType } = instance;
 
 		return {
 			tabs: [
@@ -215,7 +224,7 @@ Template.apps.helpers({
 					condition() {
 						return true;
 					},
-					active: true,
+					active: searchType.get() === 'marketplace',
 				},
 				{
 					label: t('Installed'),
@@ -223,15 +232,19 @@ Template.apps.helpers({
 					condition() {
 						return true;
 					},
+					active: searchType.get() === 'installed',
 				},
 			],
 			onChange(value) {
+				instance.apps.set([]);
 				searchType.set(value);
+				instance.isLoading.set(true);
 
 				if (value === 'marketplace') {
 					getApps(instance);
 				} else {
 					instance.apps.set(instance.installedApps.get());
+					instance.isLoading.set(false);
 				}
 			},
 		};