diff --git a/src/renderer/components/layout/sidebar.tsx b/src/renderer/components/layout/sidebar.tsx
index 531c9db1a0..516cdf1b10 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 b8843b542d..bfd50fe998 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 9708221252..e13b5f5bca 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() {