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>

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>
     );
   }