fix missing empty indicators

src/discover/Discover.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!loading">
+  <ContentLoader :loading="loading">
     <div v-for="section in sections" :key="section.key" class="mb-4">
       <template v-if="result[section.key].length > 0">
         <h1>
@@ -14,7 +14,8 @@
         <AlbumList :items="result[section.key]" allow-h-scroll />
       </template>
     </div>
-  </div>
+    <EmptyIndicator v-if="empty" />
+  </ContentLoader>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue'
@@ -44,6 +45,9 @@
           { name: 'Most played', key: 'most-played' },
           { name: 'Random', key: 'random' },
         ]
+      },
+      empty() {
+        return Object.values(this.result).findIndex(x => x.length > 0) === -1
       }
     },
     created() {

src/library/album/AlbumLibrary.vue

@@ -9,6 +9,7 @@
     </ul>
     <AlbumList :items="albums" />
     <InfiniteLoader :key="sort" :loading="loading" :has-more="hasMore" @load-more="loadMore" />
+    <EmptyIndicator v-if="!loading && albums.length === 0" />
   </div>
 </template>
 <script lang="ts">
@@ -26,7 +27,7 @@
     data() {
       return {
         albums: [] as | Album[],
-        loading: false,
+        loading: true,
         offset: 0 as number,
         hasMore: true,
       }

src/library/artist/ArtistLibrary.vue

@@ -14,6 +14,7 @@
     </ul>
     <ContentLoader v-slot :loading="loading">
       <ArtistList :items="sortedItems" />
+      <EmptyIndicator v-if="items.length === 0" />
     </ContentLoader>
   </div>
 </template>

src/library/genre/GenreLibrary.vue

@@ -13,7 +13,7 @@
       </li>
     </ul>
     <ContentLoader v-slot :loading="loading">
-      <Tiles>
+      <Tiles v-if="sortedItems.length > 0">
         <Tile v-for="item in sortedItems" :key="item.id"
               :to="{name: 'genre', params: { id: item.id } }"
               :title="item.name" :image="item.image">
@@ -23,6 +23,7 @@
           </template>
         </Tile>
       </Tiles>
+      <EmptyIndicator v-else />
     </ContentLoader>
   </div>
 </template>