Use loading indicators

frontend/src/components/ChannelList.tsx

@@ -7,6 +7,7 @@ import FormattedNumber from './FormattedNumber';
 import Button from './Button';
 import ChannelIcon from './ChannelIcon';
 import ChannelBanner from './ChannelBanner';
+import LoadingIndicator from './LoadingIndicator';
 import { useUserConfigStore } from '../stores/UserConfigStore';
 
 type ChannelListProps = {
@@ -18,7 +19,10 @@ const ChannelList = ({ channelList, refreshChannelList }: ChannelListProps) => {
   const { userConfig } = useUserConfigStore();
   const viewStyle = userConfig.view_style_channel;
 
-  if (!channelList || channelList.length === 0) {
+  if (!channelList) {
+    return <LoadingIndicator />;
+  }
+  if (channelList.length === 0) {
     return <h2>No channels found...</h2>;
   }
 

frontend/src/components/PlaylistList.tsx

@@ -4,6 +4,7 @@ import updatePlaylistSubscription from '../api/actions/updatePlaylistSubscriptio
 import formatDate from '../functions/formatDates';
 import Button from './Button';
 import PlaylistThumbnail from './PlaylistThumbnail';
+import LoadingIndicator from './LoadingIndicator';
 import { useUserConfigStore } from '../stores/UserConfigStore';
 import { PlaylistType } from '../api/loader/loadPlaylistById';
 
@@ -16,7 +17,10 @@ const PlaylistList = ({ playlistList, setRefresh }: PlaylistListProps) => {
   const { userConfig } = useUserConfigStore();
   const viewStyle = userConfig.view_style_playlist;
 
-  if (!playlistList || playlistList.length === 0) {
+  if (!playlistList) {
+    return <LoadingIndicator />;
+  }
+  if (playlistList.length === 0) {
     return <h2>No playlists found...</h2>;
   }
 

frontend/src/components/VideoList.tsx

@@ -2,6 +2,7 @@ import { ViewStylesEnum, ViewStylesType } from '../configuration/constants/ViewS
 import { VideoType } from '../pages/Home';
 import VideoListItem from './VideoListItem';
 import VideoListItemTable from './VideoListItemTable';
+import LoadingIndicator from './LoadingIndicator';
 
 type VideoListProps = {
   videoList: VideoType[] | undefined;
@@ -18,7 +19,10 @@ const VideoList = ({
   showReorderButton = false,
   refreshVideoList,
 }: VideoListProps) => {
-  if (!videoList || videoList.length === 0) {
+  if (!videoList) {
+    return <LoadingIndicator />;
+  }
+  if (videoList.length === 0) {
     return <h2>No videos found...</h2>;
   }
 

frontend/src/pages/ChannelVideo.tsx

@@ -171,8 +171,8 @@ const ChannelVideo = ({ videoType }: ChannelVideoProps) => {
             <VideoList videoList={videoList} viewStyle={viewStyle} refreshVideoList={setRefresh} />
             {!hasVideos && (
               <p>
-                Try going to the <Link to={Routes.Downloads}>downloads page</Link> to start the
-                scan and download tasks.
+                Try going to the <Link to={Routes.Downloads}>downloads page</Link> to start the scan
+                and download tasks.
               </p>
             )}
           </div>

frontend/src/pages/Home.tsx

@@ -198,10 +198,10 @@ const Home = () => {
       <div className={`boxed-content ${gridView}`}>
         <div className={`video-list ${userConfig.view_style_home} ${gridViewGrid}`}>
           <VideoList
-              videoList={videoList}
-              viewStyle={userConfig.view_style_home}
-              refreshVideoList={setRefreshVideoList}
-            />
+            videoList={videoList}
+            viewStyle={userConfig.view_style_home}
+            refreshVideoList={setRefreshVideoList}
+          />
           {!hasVideos && (
             <p>
               If you've already added a channel or playlist, try going to the{' '}

frontend/src/pages/Playlist.tsx

@@ -350,12 +350,12 @@ const Playlist = () => {
       <div className={`boxed-content ${gridView}`}>
         <div className={`video-list ${viewStyle} ${gridViewGrid}`}>
           <VideoList
-              videoList={videos}
-              viewStyle={viewStyle}
-              playlistId={playlistId}
-              showReorderButton={isCustomPlaylist}
-              refreshVideoList={setRefresh}
-            />
+            videoList={videos}
+            viewStyle={viewStyle}
+            playlistId={playlistId}
+            showReorderButton={isCustomPlaylist}
+            refreshVideoList={setRefresh}
+          />
           {videoInPlaylistCount === 0 && (
             <>
               {isCustomPlaylist && (