From 7d242385abb6bcd87e7cf5ef2814a1050b650217 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Tue, 16 Mar 2021 13:06:05 -0400
Subject: [PATCH 1/3] Fix custom resource loading spinner appears above
 extensions' cluster menus

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 src/renderer/components/layout/sidebar.tsx   | 7 +++----
 src/renderer/components/spinner/spinner.scss | 4 +---
 src/renderer/components/spinner/spinner.tsx  | 1 +
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/layout/sidebar.tsx b/src/renderer/components/layout/sidebar.tsx
index 531c9db1a072..516cdf1b1046 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,9 @@ 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 <Spinner centerHorizontal />;
     }
 
     return Object.entries(crdStore.groups).map(([group, crds]) => {
diff --git a/src/renderer/components/spinner/spinner.scss b/src/renderer/components/spinner/spinner.scss
index b8843b542d6d..bfd50fe998fb 100644
--- a/src/renderer/components/spinner/spinner.scss
+++ b/src/renderer/components/spinner/spinner.scss
@@ -35,9 +35,7 @@
   }
 
   &.centerHorizontal {
-    position: absolute;
-    left: 50%;
-    margin-left: calc(var(--spinner-size) / -2);
+    margin-left: 50%;
   }
 
   @keyframes rotate {
diff --git a/src/renderer/components/spinner/spinner.tsx b/src/renderer/components/spinner/spinner.tsx
index 97082212527f..e13b5f5bca50 100644
--- a/src/renderer/components/spinner/spinner.tsx
+++ b/src/renderer/components/spinner/spinner.tsx
@@ -13,6 +13,7 @@ export class Spinner extends React.Component<SpinnerProps, {}> {
   static defaultProps = {
     singleColor: true,
     center: false,
+    centerHorizontal: false,
   };
 
   render() {

From 97b2fc7d31bd621d1de3365dff604b7b12d2a0a2 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Wed, 31 Mar 2021 07:59:51 -0400
Subject: [PATCH 2/3] use flex for centering

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 src/renderer/components/layout/sidebar.tsx   | 6 +++++-
 src/renderer/components/spinner/spinner.scss | 4 ----
 src/renderer/components/spinner/spinner.tsx  | 6 ++----
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/layout/sidebar.tsx b/src/renderer/components/layout/sidebar.tsx
index 516cdf1b1046..32ddf2b18538 100644
--- a/src/renderer/components/layout/sidebar.tsx
+++ b/src/renderer/components/layout/sidebar.tsx
@@ -46,7 +46,11 @@ export class Sidebar extends React.Component<Props> {
 
   renderCustomResources() {
     if (crdStore.isLoading) {
-      return <Spinner centerHorizontal />;
+      return (
+        <div className="flex justify-center">
+          <Spinner />
+        </div>
+      );
     }
 
     return Object.entries(crdStore.groups).map(([group, crds]) => {
diff --git a/src/renderer/components/spinner/spinner.scss b/src/renderer/components/spinner/spinner.scss
index bfd50fe998fb..75c3839152a7 100644
--- a/src/renderer/components/spinner/spinner.scss
+++ b/src/renderer/components/spinner/spinner.scss
@@ -34,10 +34,6 @@
     margin-top: calc(var(--spinner-size) / -2);
   }
 
-  &.centerHorizontal {
-    margin-left: 50%;
-  }
-
   @keyframes rotate {
     0% {
       transform: rotate(0deg);
diff --git a/src/renderer/components/spinner/spinner.tsx b/src/renderer/components/spinner/spinner.tsx
index e13b5f5bca50..32c764b80add 100644
--- a/src/renderer/components/spinner/spinner.tsx
+++ b/src/renderer/components/spinner/spinner.tsx
@@ -6,19 +6,17 @@ import { cssNames } from "../../utils";
 export interface SpinnerProps extends React.HTMLProps<any> {
   singleColor?: boolean;
   center?: boolean;
-  centerHorizontal?: boolean;
 }
 
 export class Spinner extends React.Component<SpinnerProps, {}> {
   static defaultProps = {
     singleColor: true,
     center: false,
-    centerHorizontal: false,
   };
 
   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} />;
   }

From a02671cc52d9a1af558cff1e40805ed1d1956e63 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Tue, 6 Apr 2021 11:46:05 -0400
Subject: [PATCH 3/3] fix bad rebase

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 src/renderer/components/layout/sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/layout/sidebar.tsx b/src/renderer/components/layout/sidebar.tsx
index 32ddf2b18538..be8753642fe6 100644
--- a/src/renderer/components/layout/sidebar.tsx
+++ b/src/renderer/components/layout/sidebar.tsx
@@ -271,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>