Adjust remaining page loaders

src/components/library/AlbumView.tsx

@@ -33,7 +33,6 @@ import {
 import useSearchQuery from '../../hooks/useSearchQuery';
 import GenericPage from '../layout/GenericPage';
 import ListViewType from '../viewtypes/ListViewType';
-import PageLoader from '../loader/PageLoader';
 import GenericPageHeader from '../layout/GenericPageHeader';
 import { setStatus } from '../../redux/playerSlice';
 import { addModalPage } from '../../redux/miscSlice';
@@ -63,6 +62,7 @@ import { Artist, Genre, Item, Server } from '../../types';
 import { setPlaylistRate } from '../../redux/playlistSlice';
 import Card from '../card/Card';
 import { setFilter, setPagination } from '../../redux/viewSlice';
+import CenterLoader from '../loader/CenterLoader';
 
 interface AlbumParams {
   id: string;
@@ -278,7 +278,7 @@ const AlbumView = ({ ...rest }: any) => {
   };
 
   if (isLoading) {
-    return <PageLoader />;
+    return <CenterLoader />;
   }
 
   if (isError) {

src/components/library/ArtistView.tsx

@@ -27,7 +27,6 @@ import useSearchQuery from '../../hooks/useSearchQuery';
 import GenericPage from '../layout/GenericPage';
 import ListViewType from '../viewtypes/ListViewType';
 import GridViewType from '../viewtypes/GridViewType';
-import PageLoader from '../loader/PageLoader';
 import GenericPageHeader from '../layout/GenericPageHeader';
 import {
   appendPlayQueue,
@@ -63,6 +62,7 @@ import useColumnSort from '../../hooks/useColumnSort';
 import { setPlaylistRate } from '../../redux/playlistSlice';
 import CustomTooltip from '../shared/CustomTooltip';
 import { setFilter, setPagination } from '../../redux/viewSlice';
+import CenterLoader from '../loader/CenterLoader';
 
 const fac = new FastAverageColor();
 
@@ -525,7 +525,7 @@ const ArtistView = ({ ...rest }: any) => {
   }, [data?.album, data?.id]);
 
   if (isLoading || isLoadingTopSongs || imageAverageColor.loaded === false) {
-    return <PageLoader />;
+    return <CenterLoader />;
   }
 
   if (isError) {

src/components/library/FolderList.tsx

@@ -5,7 +5,6 @@ import { useQuery, useQueryClient } from 'react-query';
 import { useHistory } from 'react-router-dom';
 import { ButtonToolbar, Icon } from 'rsuite';
 import { useTranslation } from 'react-i18next';
-import PageLoader from '../loader/PageLoader';
 import ListViewType from '../viewtypes/ListViewType';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import {
@@ -25,6 +24,7 @@ import useRouterQuery from '../../hooks/useRouterQuery';
 import { Server } from '../../types';
 import { apiController } from '../../api/controller';
 import { setPlaylistRate } from '../../redux/playlistSlice';
+import CenterLoader from '../loader/CenterLoader';
 
 const FolderList = () => {
   const { t } = useTranslation();
@@ -170,7 +170,7 @@ const FolderList = () => {
 
   return (
     <>
-      {(isLoading || isLoadingMusicFolders) && <PageLoader />}
+      {(isLoading || isLoadingMusicFolders) && <CenterLoader />}
       {isError && <div>Error: {error}</div>}
       {!isLoading && indexData && (
         <GenericPage
@@ -227,43 +227,40 @@ const FolderList = () => {
             />
           }
         >
-          {isLoadingFolderData ? (
-            <PageLoader />
-          ) : (
-            <ListViewType
-              data={
-                misc.searchQuery !== ''
-                  ? filteredData
-                  : folder.currentViewedFolder
-                  ? folderData?.child
-                  : indexData
-              }
-              tableColumns={settings.getSync('musicListColumns')}
-              rowHeight={Number(settings.getSync('musicListRowHeight'))}
-              fontSize={Number(settings.getSync('musicListFontSize'))}
-              handleRowClick={handleRowClick}
-              handleRowDoubleClick={handleRowDoubleClick}
-              handleFavorite={handleRowFavorite}
-              handleRating={handleRowRating}
-              cacheImages={{
-                enabled: settings.getSync('cacheImages'),
-                cacheType: 'folder',
-                cacheIdProperty: 'albumId',
-              }}
-              page="folderListPage"
-              listType="folder"
-              virtualized
-              disabledContextMenuOptions={[
-                'addToFavorites',
-                'removeFromFavorites',
-                'viewInModal',
-                'moveSelectedTo',
-                'removeSelected',
-                'deletePlaylist',
-                'viewInFolder',
-              ]}
-            />
-          )}
+          <ListViewType
+            data={
+              misc.searchQuery !== ''
+                ? filteredData
+                : folder.currentViewedFolder
+                ? folderData?.child
+                : indexData
+            }
+            loading={isLoadingFolderData}
+            tableColumns={settings.getSync('musicListColumns')}
+            rowHeight={Number(settings.getSync('musicListRowHeight'))}
+            fontSize={Number(settings.getSync('musicListFontSize'))}
+            handleRowClick={handleRowClick}
+            handleRowDoubleClick={handleRowDoubleClick}
+            handleFavorite={handleRowFavorite}
+            handleRating={handleRowRating}
+            cacheImages={{
+              enabled: settings.getSync('cacheImages'),
+              cacheType: 'folder',
+              cacheIdProperty: 'albumId',
+            }}
+            page="folderListPage"
+            listType="folder"
+            virtualized
+            disabledContextMenuOptions={[
+              'addToFavorites',
+              'removeFromFavorites',
+              'viewInModal',
+              'moveSelectedTo',
+              'removeSelected',
+              'deletePlaylist',
+              'viewInFolder',
+            ]}
+          />
         </GenericPage>
       )}
     </>

src/components/library/GenreList.tsx

@@ -7,7 +7,6 @@ import useSearchQuery from '../../hooks/useSearchQuery';
 import GenericPage from '../layout/GenericPage';
 import GenericPageHeader from '../layout/GenericPageHeader';
 import ListViewType from '../viewtypes/ListViewType';
-import PageLoader from '../loader/PageLoader';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import {
   clearSelected,
@@ -19,6 +18,7 @@ import { apiController } from '../../api/controller';
 import { StyledTag } from '../shared/styled';
 import { setFilter, setPagination } from '../../redux/viewSlice';
 import { Item } from '../../types';
+import CenterLoader from '../loader/CenterLoader';
 
 const GenreList = () => {
   const { t } = useTranslation();
@@ -84,7 +84,7 @@ const GenreList = () => {
         />
       }
     >
-      {isLoading && <PageLoader />}
+      {isLoading && <CenterLoader />}
       {isError && <div>{t('Error: {{error}}', { error })}</div>}
       {!isLoading && genres && !isError && (
         <ListViewType

src/components/player/NowPlayingView.tsx

@@ -33,7 +33,6 @@ import {
 import GenericPage from '../layout/GenericPage';
 import GenericPageHeader from '../layout/GenericPageHeader';
 import ListViewType from '../viewtypes/ListViewType';
-import PageLoader from '../loader/PageLoader';
 import { setStatus } from '../../redux/playerSlice';
 import {
   AutoPlaylistButton,
@@ -64,6 +63,7 @@ import { apiController } from '../../api/controller';
 import { Song } from '../../types';
 import { setPlaylistRate } from '../../redux/playlistSlice';
 import NowPlayingInfoView from './NowPlayingInfoView';
+import CenterLoader from '../loader/CenterLoader';
 
 const NowPlayingView = () => {
   const { t } = useTranslation();
@@ -544,7 +544,7 @@ const NowPlayingView = () => {
         }
       >
         {!playQueue ? (
-          <PageLoader />
+          <CenterLoader />
         ) : (
           <>
             {infoMode && <NowPlayingInfoView />}

src/components/playlist/PlaylistList.tsx

@@ -6,7 +6,6 @@ import settings from 'electron-settings';
 import { useTranslation } from 'react-i18next';
 import useSearchQuery from '../../hooks/useSearchQuery';
 import ListViewType from '../viewtypes/ListViewType';
-import PageLoader from '../loader/PageLoader';
 import GenericPage from '../layout/GenericPage';
 import GenericPageHeader from '../layout/GenericPageHeader';
 import GridViewType from '../viewtypes/GridViewType';
@@ -99,10 +98,6 @@ const PlaylistList = () => {
     history.push(`playlist/${rowData.id}`);
   };
 
-  if (isLoading) {
-    return <PageLoader />;
-  }
-
   if (isError) {
     return <span>{t('Error: {{error}}', { error: error.message })}</span>;
   }
@@ -224,6 +219,7 @@ const PlaylistList = () => {
       {viewType === 'list' && (
         <ListViewType
           data={misc.searchQuery === '' ? sortedData : filteredData}
+          loading={isLoading}
           handleRowClick={handleRowClick}
           handleRowDoubleClick={handleRowDoubleClick}
           tableColumns={config.lookAndFeel.listView.playlist.columns}
@@ -253,6 +249,7 @@ const PlaylistList = () => {
       {viewType === 'grid' && (
         <GridViewType
           data={misc.searchQuery === '' ? sortedData : filteredData}
+          loading={isLoading}
           cardTitle={{
             prefix: 'playlist',
             property: 'title',

src/components/search/SearchView.tsx

@@ -7,7 +7,6 @@ import { useTranslation } from 'react-i18next';
 import useRouterQuery from '../../hooks/useRouterQuery';
 import GenericPage from '../layout/GenericPage';
 import GenericPageHeader from '../layout/GenericPageHeader';
-import PageLoader from '../loader/PageLoader';
 import ScrollingMenu from '../scrollingmenu/ScrollingMenu';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import {
@@ -23,6 +22,7 @@ import { SectionTitle, SectionTitleWrapper, StyledPanel } from '../shared/styled
 import { apiController } from '../../api/controller';
 import { Server } from '../../types';
 import { setPlaylistRate } from '../../redux/playlistSlice';
+import CenterLoader from '../loader/CenterLoader';
 
 const SearchView = () => {
   const { t } = useTranslation();
@@ -206,7 +206,7 @@ const SearchView = () => {
 
   return (
     <GenericPage header={<GenericPageHeader title={t('Search: {{urlQuery}}', { urlQuery })} />}>
-      {isLoading && <PageLoader />}
+      {isLoading && <CenterLoader />}
       {isError && <div>Error: {error}</div>}
       {!isLoading && data && (
         <>

src/components/settings/ConfigPanels/ServerConfig.tsx

@@ -9,8 +9,8 @@ import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
 import { setAppliedFolderViews, setMusicFolder } from '../../../redux/folderSlice';
 import { apiController } from '../../../api/controller';
 import { Folder, Server } from '../../../types';
-import PageLoader from '../../loader/PageLoader';
 import ConfigOption from '../ConfigOption';
+import CenterLoader from '../../loader/CenterLoader';
 
 const ServerConfig = ({ bordered }: any) => {
   const { t } = useTranslation();
@@ -23,7 +23,7 @@ const ServerConfig = ({ bordered }: any) => {
   const musicFolderPickerContainerRef = useRef(null);
 
   if (isLoading) {
-    return <PageLoader />;
+    return <CenterLoader />;
   }
 
   return (

src/components/viewtypes/GridViewType.tsx

@@ -219,8 +219,10 @@ const GridViewType = ({
                 paginationProps={paginationProps}
                 gridRef={gridRef}
               />
-            ) : (
+            ) : loading ? (
               <CenterLoader />
+            ) : (
+              <></>
             )}
 
             {paginationProps && paginationProps?.recordsPerPage !== 0 && (

src/components/viewtypes/ListViewType.tsx

@@ -3,7 +3,7 @@
 // Resize derived from @nimrod-cohen https://gitter.im/rsuite/rsuite?at=5e1cd3f165540a529a0f5deb
 import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
 import { DOMHelper } from 'rsuite';
-import PageLoader from '../loader/PageLoader';
+import CenterLoader from '../loader/CenterLoader';
 import ListViewTable from './ListViewTable';
 
 declare global {
@@ -175,7 +175,7 @@ const ListViewType = (
 
   return (
     <>
-      {!show && <PageLoader />}
+      {!show && <CenterLoader />}
       <div
         style={{
           flexGrow: 1,