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

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

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>