Set new loader centered position

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';

src/components/layout/SidebarPlaylists.tsx

@@ -52,7 +52,7 @@ const SidebarPlaylists = ({ width }: any) => {
       {({ height }: any) => (
         <>
           {isLoading ? (
-            <CenterLoader />
+            <CenterLoader absolute />
           ) : (
             <List
               height={height - 25}

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>
   );
 };

src/components/viewtypes/GridViewType.tsx

@@ -220,7 +220,7 @@ const GridViewType = ({
                 gridRef={gridRef}
               />
             ) : loading ? (
-              <CenterLoader />
+              <CenterLoader absolute />
             ) : (
               <></>
             )}