fix: show loading-state when activating a cluster or adding new one

Signed-off-by: Roman <ixrock@gmail.com>

src/common/cluster-store.ts

@@ -77,6 +77,10 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
   @observable removedClusters = observable.map<ClusterId, Cluster>();
   @observable clusters = observable.map<ClusterId, Cluster>();
 
+  @computed get activeCluster(): Cluster | null {
+    return this.getById(this.activeClusterId);
+  }
+
   @computed get clustersList(): Cluster[] {
     return Array.from(this.clusters.values());
   }
@@ -194,7 +198,10 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
 
 export const clusterStore = ClusterStore.getInstance<ClusterStore>();
 
-export function getHostedCluster(): Cluster {
-  const clusterId = location.hostname.split(".")[0];
-  return clusterStore.getById(clusterId);
+export function getHostedClusterId() {
+  return location.hostname.split(".")[0];
+}
+
+export function getHostedCluster(): Cluster {
+  return clusterStore.getById(getHostedClusterId());
 }

src/main/window-manager.ts

@@ -5,8 +5,6 @@ import type { ClusterId } from "../common/cluster-store";
 import { clusterStore } from "../common/cluster-store";
 import logger from "./logger";
 
-// fixme: remove switching view delay on first load
-
 export class WindowManager {
   protected activeView: BrowserWindow;
   protected splashWindow: BrowserWindow;

src/renderer/components/cluster-manager/cluster-manager.scss

@@ -8,6 +8,13 @@
   #lens-view {
     position: relative;
     grid-area: lens-view;
+
+    &.inactive {
+      opacity: .85;
+      filter: grayscale(1);
+      user-select: none;
+      pointer-events: none;
+    }
   }
 
   .ClustersMenu {

src/renderer/components/cluster-manager/cluster-manager.tsx

@@ -1,5 +1,7 @@
 import "./cluster-manager.scss"
 import React from "react";
+import { computed } from "mobx";
+import { observer } from "mobx-react";
 import { App } from "../app";
 import { ClustersMenu } from "./clusters-menu";
 import { BottomBar } from "./bottom-bar";
@@ -7,12 +9,15 @@ import { cssNames, IClassName } from "../../utils";
 import { Terminal } from "../dock/terminal";
 import { i18nStore } from "../../i18n";
 import { themeStore } from "../../theme.store";
+import { clusterStore, getHostedClusterId } from "../../../common/cluster-store";
+import { CubeSpinner } from "../spinner";
 
 interface Props {
   className?: IClassName;
   contentClass?: IClassName;
 }
 
+@observer
 export class ClusterManager extends React.Component<Props> {
   static async init() {
     await Promise.all([
@@ -22,16 +27,26 @@ export class ClusterManager extends React.Component<Props> {
     ])
   }
 
+  @computed get isInactive() {
+    const { activeCluster, activeClusterId } = clusterStore;
+    const isActivatedBefore = activeCluster?.initialized;
+    return !isActivatedBefore && activeClusterId !== getHostedClusterId();
+  }
+
   render() {
     const { className, contentClass } = this.props;
+    const lensViewClass = cssNames("flex column", contentClass, {
+      inactive: this.isInactive,
+    });
     return (
       <div className={cssNames("ClusterManager", className)}>
         <div id="draggable-top"/>
-        <div id="lens-view" className={cssNames("flex column", contentClass)}>
+        <div id="lens-view" className={lensViewClass}>
           <App/>
         </div>
         <ClustersMenu/>
         <BottomBar/>
+        {this.isInactive && <CubeSpinner center/>}
       </div>
     )
   }

src/renderer/components/spinner/cube-spinner.scss

@@ -3,6 +3,13 @@
 .CubeSpinner {
   --size: 70px;
 
+  &.center {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
   .sk-cube-grid {
     $size: 70px;
     width: $size;

src/renderer/components/spinner/cube-spinner.tsx

@@ -4,13 +4,14 @@ import { cssNames } from "../../utils";
 
 interface Props {
   className?: string;
+  center?: boolean;
 }
 
-export class CubeSpinner extends React.PureComponent<Props> {
+export class CubeSpinner extends React.Component<Props> {
   render() {
-    const { className } = this.props;
+    const { className, center } = this.props;
     return (
-      <div className={cssNames("CubeSpinner ", className)}>
+      <div className={cssNames("CubeSpinner ", className, { center })}>
         <div className="sk-cube-grid">
           <div className="sk-cube sk-cube1"></div>
           <div className="sk-cube sk-cube2"></div>