From bfa4970389921a9c271ea7fdd438826ee77e5d94 Mon Sep 17 00:00:00 2001
From: Jari Kolehmainen <jari.kolehmainen@gmail.com>
Date: Wed, 23 Dec 2020 13:12:05 +0200
Subject: [PATCH] Workloads overview: don't block on store load (#1829)

* workloads overview: don't block on store load

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* subscribe after loadAll

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
---
 .../+workloads-overview/overview.tsx          | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/+workloads-overview/overview.tsx b/src/renderer/components/+workloads-overview/overview.tsx
index bed38f99a3..318ad53f77 100644
--- a/src/renderer/components/+workloads-overview/overview.tsx
+++ b/src/renderer/components/+workloads-overview/overview.tsx
@@ -14,7 +14,6 @@ import { statefulSetStore } from "../+workloads-statefulsets/statefulset.store";
 import { replicaSetStore } from "../+workloads-replicasets/replicasets.store";
 import { jobStore } from "../+workloads-jobs/job.store";
 import { cronJobStore } from "../+workloads-cronjobs/cronjob.store";
-import { Spinner } from "../spinner";
 import { Events } from "../+events";
 import { KubeObjectStore } from "../../kube-object.store";
 import { isAllowedResource } from "../../../common/rbac";
@@ -24,7 +23,6 @@ interface Props extends RouteComponentProps<IWorkloadsOverviewRouteParams> {
 
 @observer
 export class WorkloadsOverview extends React.Component<Props> {
-  @observable isReady = false;
   @observable isUnmounting = false;
 
   async componentDidMount() {
@@ -61,10 +59,13 @@ export class WorkloadsOverview extends React.Component<Props> {
     if (isAllowedResource("events")) {
       stores.push(eventStore);
     }
-    this.isReady = stores.every(store => store.isLoaded);
-    await Promise.all(stores.map(store => store.loadAll()));
-    this.isReady = true;
-    const unsubscribeList = stores.map(store => store.subscribe());
+
+    const unsubscribeList: Array<() => void> = [];
+
+    for (const store of stores) {
+      await store.loadAll();
+      unsubscribeList.push(store.subscribe());
+    }
 
     await when(() => this.isUnmounting);
     unsubscribeList.forEach(dispose => dispose());
@@ -74,11 +75,7 @@ export class WorkloadsOverview extends React.Component<Props> {
     this.isUnmounting = true;
   }
 
-  renderContents() {
-    if (!this.isReady) {
-      return <Spinner center/>;
-    }
-
+  get contents() {
     return (
       <>
         <OverviewStatuses/>
@@ -94,7 +91,7 @@ export class WorkloadsOverview extends React.Component<Props> {
   render() {
     return (
       <div className="WorkloadsOverview flex column gaps">
-        {this.renderContents()}
+        {this.contents}
       </div>
     );
   }