From 08d74f292a84afdc32d50212e4f3259061d9b30b Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Fri, 25 Oct 2024 17:32:40 +0700
Subject: [PATCH] fix: loading state for Playlist (#1862)

---
 .../js/components/screens/AlbumListScreen.vue |  2 +-
 .../js/components/screens/AllSongsScreen.vue  |  2 +-
 .../components/screens/ArtistListScreen.vue   |  2 +-
 .../js/components/screens/FavoritesScreen.vue |  2 +-
 .../js/components/screens/GenreListScreen.vue |  2 +-
 .../js/components/screens/HomeScreen.vue      |  2 +-
 .../js/components/screens/PlaylistScreen.vue  | 66 +++++++++++--------
 .../components/screens/PodcastListScreen.vue  |  2 +-
 .../js/components/screens/QueueScreen.vue     |  2 +-
 .../screens/RecentlyPlayedScreen.vue          |  2 +-
 .../screens/search/SearchExcerptsScreen.vue   |  2 +-
 .../components/song/PlayableContextMenu.vue   |  2 +-
 .../assets/js/composables/useSongList.ts      |  2 +-
 13 files changed, 49 insertions(+), 41 deletions(-)

diff --git a/resources/assets/js/components/screens/AlbumListScreen.vue b/resources/assets/js/components/screens/AlbumListScreen.vue
index 12e64f48..b33ef790 100644
--- a/resources/assets/js/components/screens/AlbumListScreen.vue
+++ b/resources/assets/js/components/screens/AlbumListScreen.vue
@@ -14,7 +14,7 @@
         <Icon :icon="faCompactDisc" />
       </template>
       No albums found.
-      <span class="secondary d-block">
+      <span class="secondary block">
         {{ isAdmin ? 'Have you set up your library yet?' : 'Contact your administrator to set up your library.' }}
       </span>
     </ScreenEmptyState>
diff --git a/resources/assets/js/components/screens/AllSongsScreen.vue b/resources/assets/js/components/screens/AllSongsScreen.vue
index 366107cc..912124a1 100644
--- a/resources/assets/js/components/screens/AllSongsScreen.vue
+++ b/resources/assets/js/components/screens/AllSongsScreen.vue
@@ -49,7 +49,7 @@
         Your library is empty.
         <a
           v-if="isPlus && ownSongsOnly"
-          class="d-block secondary"
+          class="block secondary"
           role="button"
           @click.prevent="showSongsFromOthers"
         >
diff --git a/resources/assets/js/components/screens/ArtistListScreen.vue b/resources/assets/js/components/screens/ArtistListScreen.vue
index 4cdf71f1..f9712148 100644
--- a/resources/assets/js/components/screens/ArtistListScreen.vue
+++ b/resources/assets/js/components/screens/ArtistListScreen.vue
@@ -14,7 +14,7 @@
         <Icon :icon="faMicrophoneSlash" />
       </template>
       No artists found.
-      <span class="secondary d-block">
+      <span class="secondary block">
         {{ isAdmin ? 'Have you set up your library yet?' : 'Contact your administrator to set up your library.' }}
       </span>
     </ScreenEmptyState>
diff --git a/resources/assets/js/components/screens/FavoritesScreen.vue b/resources/assets/js/components/screens/FavoritesScreen.vue
index 0d874cea..7d9381ba 100644
--- a/resources/assets/js/components/screens/FavoritesScreen.vue
+++ b/resources/assets/js/components/screens/FavoritesScreen.vue
@@ -51,7 +51,7 @@
         <Icon :icon="faHeartBroken" />
       </template>
       No favorites yet.
-      <span class="secondary d-block">
+      <span class="secondary block">
         Click the&nbsp;
         <Icon :icon="faHeart" />&nbsp;
         icon to mark a song as favorite.
diff --git a/resources/assets/js/components/screens/GenreListScreen.vue b/resources/assets/js/components/screens/GenreListScreen.vue
index 68d7c525..90f06aaf 100644
--- a/resources/assets/js/components/screens/GenreListScreen.vue
+++ b/resources/assets/js/components/screens/GenreListScreen.vue
@@ -9,7 +9,7 @@
         <GuitarIcon size="96" />
       </template>
       No genres found.
-      <span class="secondary d-block">
+      <span class="secondary block">
         {{ isAdmin ? 'Have you set up your library yet?' : 'Contact your administrator to set up your library.' }}
       </span>
     </ScreenEmptyState>
diff --git a/resources/assets/js/components/screens/HomeScreen.vue b/resources/assets/js/components/screens/HomeScreen.vue
index 670fa76c..22de80a5 100644
--- a/resources/assets/js/components/screens/HomeScreen.vue
+++ b/resources/assets/js/components/screens/HomeScreen.vue
@@ -9,7 +9,7 @@
         <Icon :icon="faVolumeOff" />
       </template>
       No songs found.
-      <span class="secondary d-block">
+      <span class="secondary block">
         {{ isAdmin ? 'Have you set up your library yet?' : 'Contact your administrator to set up your library.' }}
       </span>
     </ScreenEmptyState>
diff --git a/resources/assets/js/components/screens/PlaylistScreen.vue b/resources/assets/js/components/screens/PlaylistScreen.vue
index 544c13d2..994691f3 100644
--- a/resources/assets/js/components/screens/PlaylistScreen.vue
+++ b/resources/assets/js/components/screens/PlaylistScreen.vue
@@ -1,7 +1,7 @@
 <template>
-  <ScreenBase v-if="playlist">
+  <ScreenBase v-if="playlistId">
     <template #header>
-      <ScreenHeader :disabled="loading" :layout="songs.length === 0 ? 'collapsed' : headerLayout">
+      <ScreenHeader v-if="playlist" :disabled="loading" :layout="songs.length === 0 ? 'collapsed' : headerLayout">
         {{ playlist.name }}
         <ControlsToggle v-if="songs.length" v-model="showingControls" />
 
@@ -37,36 +37,41 @@
           />
         </template>
       </ScreenHeader>
+      <ScreenHeaderSkeleton v-else />
     </template>
 
-    <SongListSkeleton v-show="loading" class="-m-6" />
-    <SongList
-      v-if="!loading && songs.length"
-      ref="songList"
-      class="-m-6"
-      @reorder="onReorder"
-      @sort="sort"
-      @press:delete="removeSelected"
-      @press:enter="onPressEnter"
-      @scroll-breakpoint="onScrollBreakpoint"
-    />
+    <SongListSkeleton v-if="loading" class="-m-6" />
+    <template v-else>
+      <SongList
+        v-if="songs.length"
+        ref="songList"
+        class="-m-6"
+        @reorder="onReorder"
+        @sort="sort"
+        @press:delete="removeSelected"
+        @press:enter="onPressEnter"
+        @scroll-breakpoint="onScrollBreakpoint"
+      />
 
-    <ScreenEmptyState v-if="!songs.length && !loading">
-      <template #icon>
-        <Icon :icon="faFile" />
-      </template>
+      <ScreenEmptyState v-else>
+        <template #icon>
+          <Icon :icon="faFile" />
+        </template>
 
-      <template v-if="playlist?.is_smart">
-        No songs match the playlist's
-        <a @click.prevent="editPlaylist">criteria</a>.
-      </template>
-      <template v-else>
-        The playlist is currently empty.
-        <span class="d-block secondary">
-          Drag songs into its name in the sidebar or use the &quot;Add To…&quot; button to fill it up.
-        </span>
-      </template>
-    </ScreenEmptyState>
+        <template v-if="playlist?.is_smart">
+          <p>
+            No songs match the playlist's
+            <a class="inline" @click.prevent="editPlaylist">criteria</a>.
+          </p>
+        </template>
+        <template v-else>
+          The playlist is currently empty.
+          <span class="block secondary">
+            Drag songs into its name in the sidebar or use the &quot;Add To…&quot; button to fill it up.
+          </span>
+        </template>
+      </ScreenEmptyState>
+    </template>
   </ScreenBase>
 </template>
 
@@ -93,6 +98,7 @@ import SongListSkeleton from '@/components/ui/skeletons/SongListSkeleton.vue'
 import CollaboratorsBadge from '@/components/playlist/PlaylistCollaboratorsBadge.vue'
 import PlaylistThumbnail from '@/components/ui/PlaylistThumbnail.vue'
 import ScreenBase from '@/components/screens/ScreenBase.vue'
+import ScreenHeaderSkeleton from '@/components/ui/skeletons/ScreenHeaderSkeleton.vue'
 
 const { currentUser } = useAuthorization()
 const { triggerNotFound, getRouteParam, onScreenActivated } = useRouter()
@@ -152,7 +158,9 @@ const fetchDetails = async (refresh = false) => {
   }
 
   try {
-    [songs.value, collaborators.value] = await Promise.all([
+    loading.value = true
+
+    ;[songs.value, collaborators.value] = await Promise.all([
       songStore.fetchForPlaylist(playlist.value!, refresh),
       playlist.value!.is_collaborative
         ? playlistCollaborationService.fetchCollaborators(playlist.value!)
diff --git a/resources/assets/js/components/screens/PodcastListScreen.vue b/resources/assets/js/components/screens/PodcastListScreen.vue
index 64f2983d..ea4a9783 100644
--- a/resources/assets/js/components/screens/PodcastListScreen.vue
+++ b/resources/assets/js/components/screens/PodcastListScreen.vue
@@ -23,7 +23,7 @@
         <Icon :icon="faPodcast" />
       </template>
       No podcasts found.
-      <span class="secondary d-block">Add a podcast to get started.</span>
+      <span class="secondary block">Add a podcast to get started.</span>
     </ScreenEmptyState>
 
     <div v-else v-koel-overflow-fade class="-m-6 p-6 overflow-auto space-y-3 min-h-full">
diff --git a/resources/assets/js/components/screens/QueueScreen.vue b/resources/assets/js/components/screens/QueueScreen.vue
index 2b737734..700e923e 100644
--- a/resources/assets/js/components/screens/QueueScreen.vue
+++ b/resources/assets/js/components/screens/QueueScreen.vue
@@ -44,7 +44,7 @@
       </template>
 
       No songs queued.
-      <span v-if="libraryNotEmpty" class="d-block secondary">
+      <span v-if="libraryNotEmpty" class="block secondary">
         How about
         <a class="start" @click.prevent="shuffleSome">playing some random songs</a>?
       </span>
diff --git a/resources/assets/js/components/screens/RecentlyPlayedScreen.vue b/resources/assets/js/components/screens/RecentlyPlayedScreen.vue
index 284bd15c..95656c85 100644
--- a/resources/assets/js/components/screens/RecentlyPlayedScreen.vue
+++ b/resources/assets/js/components/screens/RecentlyPlayedScreen.vue
@@ -41,7 +41,7 @@
         <Icon :icon="faClock" />
       </template>
       No songs recently played.
-      <span class="secondary d-block">Start playing to populate this playlist.</span>
+      <span class="secondary block">Start playing to populate this playlist.</span>
     </ScreenEmptyState>
   </ScreenBase>
 </template>
diff --git a/resources/assets/js/components/screens/search/SearchExcerptsScreen.vue b/resources/assets/js/components/screens/search/SearchExcerptsScreen.vue
index 7728c428..70cda95e 100644
--- a/resources/assets/js/components/screens/search/SearchExcerptsScreen.vue
+++ b/resources/assets/js/components/screens/search/SearchExcerptsScreen.vue
@@ -19,7 +19,7 @@
         <Icon :icon="faSearch" />
       </template>
       Find songs, artists, and albums,
-      <span class="secondary d-block">all in one place.</span>
+      <span class="secondary block">all in one place.</span>
     </ScreenEmptyState>
   </ScreenBase>
 </template>
diff --git a/resources/assets/js/components/song/PlayableContextMenu.vue b/resources/assets/js/components/song/PlayableContextMenu.vue
index 262f8a40..bfb5b5f0 100644
--- a/resources/assets/js/components/song/PlayableContextMenu.vue
+++ b/resources/assets/js/components/song/PlayableContextMenu.vue
@@ -28,7 +28,7 @@
           <li @click="addToFavorites">Favorites</li>
         </template>
         <li v-if="normalPlaylists.length" class="separator" />
-        <template class="d-block">
+        <template class="block">
           <ul v-if="normalPlaylists.length" v-koel-overflow-fade class="relative max-h-48 overflow-y-auto">
             <li v-for="p in normalPlaylists" :key="p.id" @click="addToExistingPlaylist(p)">{{ p.name }}</li>
           </ul>
diff --git a/resources/assets/js/composables/useSongList.ts b/resources/assets/js/composables/useSongList.ts
index cf2887c3..a5539638 100644
--- a/resources/assets/js/composables/useSongList.ts
+++ b/resources/assets/js/composables/useSongList.ts
@@ -135,7 +135,7 @@ export const useSongList = (
   const applyFilter = throttle((keywords: string) => (filterKeywords.value = keywords), 200)
 
   const filteredPlayables = computed(() => {
-    if (!fuzzy) {
+    if (!fuzzy || !filterKeywords.value) {
       return playables.value
     }