From 69887f5e4e5b7c752b910110da02b930c7582108 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 7 Feb 2022 13:47:29 -0800
Subject: [PATCH] Set new loader centered position

---
 src/components/layout/Sidebar.tsx          | 2 +-
 src/components/layout/SidebarPlaylists.tsx | 2 +-
 src/components/loader/CenterLoader.tsx     | 4 ++--
 src/components/viewtypes/GridViewType.tsx  | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 4ea206d..d950f7e 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -16,7 +16,7 @@ import {
   SidebarNavItem,
 } from './styled';
 import { StyledButton } from '../shared/styled';
-import { InfoModal } from '../modal/PageModal';
+import { InfoModal } from '../modal/Modal';
 import placeholderImg from '../../img/placeholder.png';
 import SidebarPlaylists from './SidebarPlaylists';
 import { setSidebar } from '../../redux/configSlice';
diff --git a/src/components/layout/SidebarPlaylists.tsx b/src/components/layout/SidebarPlaylists.tsx
index cfabd14..bd78bfe 100644
--- a/src/components/layout/SidebarPlaylists.tsx
+++ b/src/components/layout/SidebarPlaylists.tsx
@@ -52,7 +52,7 @@ const SidebarPlaylists = ({ width }: any) => {
       {({ height }: any) => (
         <>
           {isLoading ? (
-            <CenterLoader />
+            <CenterLoader absolute />
           ) : (
             <List
               height={height - 25}
diff --git a/src/components/loader/CenterLoader.tsx b/src/components/loader/CenterLoader.tsx
index 2f13fd8..1c4823a 100644
--- a/src/components/loader/CenterLoader.tsx
+++ b/src/components/loader/CenterLoader.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { Loader } from 'rsuite';
 
-const CenterLoader = () => {
+const CenterLoader = ({ absolute }: any) => {
   return (
     <div style={{ height: '100%' }}>
-      <Loader style={{ top: '50%', left: '50%', position: 'absolute' }} />
+      <Loader style={{ top: '50%', left: '50%', position: absolute ? 'absolute' : 'relative' }} />
     </div>
   );
 };
diff --git a/src/components/viewtypes/GridViewType.tsx b/src/components/viewtypes/GridViewType.tsx
index fbc1f36..ae699ee 100644
--- a/src/components/viewtypes/GridViewType.tsx
+++ b/src/components/viewtypes/GridViewType.tsx
@@ -220,7 +220,7 @@ const GridViewType = ({
                 gridRef={gridRef}
               />
             ) : loading ? (
-              <CenterLoader />
+              <CenterLoader absolute />
             ) : (
               <></>
             )}