From 4388558d2e18942b3aecef583d9c4bbd5ee995c7 Mon Sep 17 00:00:00 2001
From: Roman <ixrock@gmail.com>
Date: Fri, 24 Jul 2020 17:51:50 +0300
Subject: [PATCH] fix: show loading-state when activating a cluster or adding
 new one

Signed-off-by: Roman <ixrock@gmail.com>
---
 src/common/cluster-store.ts                     | 13 ++++++++++---
 src/main/window-manager.ts                      |  2 --
 .../cluster-manager/cluster-manager.scss        |  7 +++++++
 .../cluster-manager/cluster-manager.tsx         | 17 ++++++++++++++++-
 .../components/spinner/cube-spinner.scss        |  7 +++++++
 .../components/spinner/cube-spinner.tsx         |  7 ++++---
 6 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/src/common/cluster-store.ts b/src/common/cluster-store.ts
index ad6b48d5b3..d059b553aa 100644
--- a/src/common/cluster-store.ts
+++ b/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());
 }
diff --git a/src/main/window-manager.ts b/src/main/window-manager.ts
index 71b12c217e..8057602f48 100644
--- a/src/main/window-manager.ts
+++ b/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;
diff --git a/src/renderer/components/cluster-manager/cluster-manager.scss b/src/renderer/components/cluster-manager/cluster-manager.scss
index ae6916d147..4b9040596d 100644
--- a/src/renderer/components/cluster-manager/cluster-manager.scss
+++ b/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 {
diff --git a/src/renderer/components/cluster-manager/cluster-manager.tsx b/src/renderer/components/cluster-manager/cluster-manager.tsx
index a785858032..0cd2a3070e 100644
--- a/src/renderer/components/cluster-manager/cluster-manager.tsx
+++ b/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>
     )
   }
diff --git a/src/renderer/components/spinner/cube-spinner.scss b/src/renderer/components/spinner/cube-spinner.scss
index 5ef7eafa22..fee5619c74 100644
--- a/src/renderer/components/spinner/cube-spinner.scss
+++ b/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;
diff --git a/src/renderer/components/spinner/cube-spinner.tsx b/src/renderer/components/spinner/cube-spinner.tsx
index 549f31480e..82d0dfbaf1 100644
--- a/src/renderer/components/spinner/cube-spinner.tsx
+++ b/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>