Fix custom resource loading spinner appears above extensions' cluster menus

Signed-off-by: Sebastian Malton <sebastian@malton.name>

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]) => {

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 {

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() {