Add full container spinner/loader

src/renderer/components/spinner/index.tsx

@@ -1,3 +1,4 @@
+import { Center } from '@mantine/core';
 import type { IconType } from 'react-icons';
 import { RiLoader5Fill } from 'react-icons/ri';
 import styled from 'styled-components';
@@ -5,6 +6,7 @@ import { rotating } from '/@/renderer/styles';
 
 interface SpinnerProps extends IconType {
   color?: string;
+  container?: boolean;
   size?: number;
 }
 
@@ -14,6 +16,17 @@ export const SpinnerIcon = styled(RiLoader5Fill)`
 `;
 
 export const Spinner = ({ ...props }: SpinnerProps) => {
+  if (props.container) {
+    return (
+      <Center
+        h="100%"
+        w="100%"
+      >
+        <SpinnerIcon {...props} />
+      </Center>
+    );
+  }
+
   return <SpinnerIcon {...props} />;
 };
 

src/renderer/features/home/routes/home-route.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useRef } from 'react';
-import { Center, Stack } from '@mantine/core';
+import { Stack } from '@mantine/core';
 import { AlbumListSort, LibraryItem, ServerType, SortOrder } from '/@/renderer/api/types';
 import { FeatureCarousel, NativeScrollArea, Spinner } from '/@/renderer/components';
 import { useAlbumList } from '/@/renderer/features/albums';
@@ -93,14 +93,7 @@ const HomeRoute = () => {
     mostPlayed.isFetching;
 
   if (isLoading) {
-    return (
+    return <Spinner container />;
-      <Center
-        h="100%"
-        w="100%"
-      >
-        <Spinner />
-      </Center>
-    );
   }
 
   const carousels = [

src/renderer/layouts/default-layout/main-content.tsx

@@ -9,7 +9,6 @@ import { constrainSidebarWidth, constrainRightSidebarWidth } from '/@/renderer/u
 import { LeftSidebar } from '/@/renderer/layouts/default-layout/left-sidebar';
 import { FullScreenOverlay } from '/@/renderer/layouts/default-layout/full-screen-overlay';
 import { RightSidebar } from '/@/renderer/layouts/default-layout/right-sidebar';
-import { Center } from '@mantine/core';
 import { Spinner } from '/@/renderer/components';
 
 const SideDrawerQueue = lazy(() =>
@@ -118,16 +117,7 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
           />
         </>
       )}
-      <Suspense
+      <Suspense fallback={<Spinner container />}>
-        fallback={
-          <Center
-            h="100%"
-            w="100%"
-          >
-            <Spinner />
-          </Center>
-        }
-      >
         <Outlet />
       </Suspense>
     </MainContentContainer>