Unify not found messaging (#1020)

* Move all not found messages into list components

* match the original style

* 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,8 +19,11 @@ const ChannelList = ({ channelList, refreshChannelList }: ChannelListProps) => {
   const { userConfig } = useUserConfigStore();
   const viewStyle = userConfig.view_style_channel;
 
-  if (!channelList || channelList.length === 0) {
-    return <p>No channels found.</p>;
+  if (!channelList) {
+    return <LoadingIndicator />;
+  }
+  if (channelList.length === 0) {
+    return <h2>No channels found...</h2>;
   }
 
   return (

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,8 +17,11 @@ const PlaylistList = ({ playlistList, setRefresh }: PlaylistListProps) => {
   const { userConfig } = useUserConfigStore();
   const viewStyle = userConfig.view_style_playlist;
 
-  if (!playlistList || playlistList.length === 0) {
-    return <p>No playlists found.</p>;
+  if (!playlistList) {
+    return <LoadingIndicator />;
+  }
+  if (playlistList.length === 0) {
+    return <h2>No playlists found...</h2>;
   }
 
   return (

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,8 +19,11 @@ const VideoList = ({
   showReorderButton = false,
   refreshVideoList,
 }: VideoListProps) => {
-  if (!videoList || videoList.length === 0) {
-    return <p>No videos found.</p>;
+  if (!videoList) {
+    return <LoadingIndicator />;
+  }
+  if (videoList.length === 0) {
+    return <h2>No videos found...</h2>;
   }
 
   if (viewStyle === ViewStylesEnum.Table) {

frontend/src/pages/ChannelVideo.tsx

@@ -168,17 +168,13 @@ const ChannelVideo = ({ videoType }: ChannelVideoProps) => {
 
         <div className={`boxed-content ${gridView}`}>
           <div className={`video-list ${viewStyle} ${gridViewGrid}`}>
-            {!hasVideos && (
-              <>
-                <h2>No videos found...</h2>
-                <p>
-                  Try going to the <Link to={Routes.Downloads}>downloads page</Link> to start the
-                  scan and download tasks.
-                </p>
-              </>
-            )}
-
             <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.
+              </p>
+            )}
           </div>
         </div>
         {pagination && (

frontend/src/pages/Channels.tsx

@@ -59,7 +59,6 @@ const Channels = () => {
 
   const channels = channelListResponseData?.data;
   const pagination = channelListResponseData?.paginate;
-  const hasChannels = channels?.length !== 0;
 
   const handleUserConfigUpdate = async (config: Partial<UserConfigType>) => {
     const updatedUserConfig = await updateUserConfig(config);
@@ -195,9 +194,7 @@ const Channels = () => {
         </div>
 
         <div className={`channel-list ${userConfig.view_style_channel}`}>
-          {!hasChannels && <h2>No channels found...</h2>}
-
-          {hasChannels && <ChannelList channelList={channels} refreshChannelList={setRefresh} />}
+          <ChannelList channelList={channels} refreshChannelList={setRefresh} />
         </div>
 
         {pagination && (

frontend/src/pages/Home.tsx

@@ -197,23 +197,17 @@ 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}
+          />
           {!hasVideos && (
-            <>
-              <h2>No videos found...</h2>
-              <p>
-                If you've already added a channel or playlist, try going to the{' '}
-                <Link to={Routes.Downloads}>downloads page</Link> to start the scan and download
-                tasks.
-              </p>
-            </>
-          )}
-
-          {hasVideos && (
-            <VideoList
-              videoList={videoList}
-              viewStyle={userConfig.view_style_home}
-              refreshVideoList={setRefreshVideoList}
-            />
+            <p>
+              If you've already added a channel or playlist, try going to the{' '}
+              <Link to={Routes.Downloads}>downloads page</Link> to start the scan and download
+              tasks.
+            </p>
           )}
         </div>
       </div>

frontend/src/pages/Playlist.tsx

@@ -349,16 +349,21 @@ const Playlist = () => {
 
       <div className={`boxed-content ${gridView}`}>
         <div className={`video-list ${viewStyle} ${gridViewGrid}`}>
+          <VideoList
+            videoList={videos}
+            viewStyle={viewStyle}
+            playlistId={playlistId}
+            showReorderButton={isCustomPlaylist}
+            refreshVideoList={setRefresh}
+          />
           {videoInPlaylistCount === 0 && (
             <>
-              <h2>No videos found...</h2>
               {isCustomPlaylist && (
                 <p>
                   Try going to the <a href="{% url 'home' %}">home page</a> to add videos to this
                   playlist.
                 </p>
               )}
-
               {!isCustomPlaylist && (
                 <p>
                   Try going to the <Link to={Routes.Downloads}>downloads page</Link> to start the
@@ -367,15 +372,6 @@ const Playlist = () => {
               )}
             </>
           )}
-          {videoInPlaylistCount !== 0 && (
-            <VideoList
-              videoList={videos}
-              viewStyle={viewStyle}
-              playlistId={playlistId}
-              showReorderButton={isCustomPlaylist}
-              refreshVideoList={setRefresh}
-            />
-          )}
         </div>
       </div>
 

frontend/src/pages/Playlists.tsx

@@ -38,8 +38,6 @@ const Playlists = () => {
   const playlistList = playlistResponseData?.data;
   const pagination = playlistResponseData?.paginate;
 
-  const hasPlaylists = playlistResponseData?.data?.length !== 0;
-
   const viewStyle = userConfig.view_style_playlist;
   const showSubedOnly = userConfig.show_subed_only;
 
@@ -197,9 +195,7 @@ const Playlists = () => {
         </div>
 
         <div className={`playlist-list ${viewStyle}`}>
-          {!hasPlaylists && <h2>No playlists found...</h2>}
-
-          {hasPlaylists && <PlaylistList playlistList={playlistList} setRefresh={setRefresh} />}
+          <PlaylistList playlistList={playlistList} setRefresh={setRefresh} />
         </div>
       </div>