From ccf8928770e467dc410485facd5f39b2e453c469 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Tue, 20 Apr 2021 08:04:16 -0400
Subject: [PATCH] Fix custom resource loading spinner appears above extensions'
 cluster menus (#2344)

---
 src/renderer/components/layout/sidebar.tsx   | 13 ++++++++-----
 src/renderer/components/spinner/spinner.scss |  6 ------
 src/renderer/components/spinner/spinner.tsx  |  5 ++---
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/layout/sidebar.tsx b/src/renderer/components/layout/sidebar.tsx
index 531c9db1a0..be8753642f 100644
--- a/src/renderer/components/layout/sidebar.tsx
+++ b/src/renderer/components/layout/sidebar.tsx
@@ -2,7 +2,6 @@ import "./sidebar.scss";
 import type { TabLayoutRoute } from "./tab-layout";
 
 import React from "react";
-import { computed } from "mobx";
 import { observer } from "mobx-react";
 import { NavLink } from "react-router-dom";
 import { cssNames } from "../../utils";
@@ -45,9 +44,13 @@ export class Sidebar extends React.Component<Props> {
     crdStore.reloadAll();
   }
 
-  @computed get crdSubMenus(): React.ReactNode {
-    if (!crdStore.isLoaded && crdStore.isLoading) {
-      return <Spinner centerHorizontal/>;
+  renderCustomResources() {
+    if (crdStore.isLoading) {
+      return (
+        <div className="flex justify-center">
+          <Spinner />
+        </div>
+      );
     }
 
     return Object.entries(crdStore.groups).map(([group, crds]) => {
@@ -268,7 +271,7 @@ export class Sidebar extends React.Component<Props> {
             icon={<Icon material="extension"/>}
           >
             {this.renderTreeFromTabRoutes(CustomResources.tabRoutes)}
-            {this.crdSubMenus}
+            {this.renderCustomResources()}
           </SidebarItem>
           {this.renderRegisteredMenus()}
         </div>
diff --git a/src/renderer/components/spinner/spinner.scss b/src/renderer/components/spinner/spinner.scss
index b8843b542d..75c3839152 100644
--- a/src/renderer/components/spinner/spinner.scss
+++ b/src/renderer/components/spinner/spinner.scss
@@ -34,12 +34,6 @@
     margin-top: calc(var(--spinner-size) / -2);
   }
 
-  &.centerHorizontal {
-    position: absolute;
-    left: 50%;
-    margin-left: calc(var(--spinner-size) / -2);
-  }
-
   @keyframes rotate {
     0% {
       transform: rotate(0deg);
diff --git a/src/renderer/components/spinner/spinner.tsx b/src/renderer/components/spinner/spinner.tsx
index 9708221252..32c764b80a 100644
--- a/src/renderer/components/spinner/spinner.tsx
+++ b/src/renderer/components/spinner/spinner.tsx
@@ -6,7 +6,6 @@ import { cssNames } from "../../utils";
 export interface SpinnerProps extends React.HTMLProps<any> {
   singleColor?: boolean;
   center?: boolean;
-  centerHorizontal?: boolean;
 }
 
 export class Spinner extends React.Component<SpinnerProps, {}> {
@@ -16,8 +15,8 @@ export class Spinner extends React.Component<SpinnerProps, {}> {
   };
 
   render() {
-    const { center, singleColor, centerHorizontal, className, ...props } = this.props;
-    const classNames = cssNames("Spinner", className, { singleColor, center, centerHorizontal });
+    const { center, singleColor, className, ...props } = this.props;
+    const classNames = cssNames("Spinner", className, { singleColor, center });
 
     return <div {...props} className={classNames} />;
   }