rework spinners

src/library/album/AlbumLibrary.vue

@@ -7,9 +7,9 @@
         </router-link>
       </li>
     </ul>
-    <Spinner v-slot="{ data }" :data="albums">
-      <AlbumList v-if="albums" :items="data" />
-    </Spinner>
+    <ContentLoader #default :loading="albums == null">
+      <AlbumList :items="albums" />
+    </ContentLoader>
   </div>
 </template>
 <script lang="ts">

src/library/artist/ArtistDetails.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="item">
+  <ContentLoader #default :loading="item == null">
     <div class="row">
       <div class="col col-xl-8">
         <h1>{{ item.name }}</h1>
@@ -26,7 +26,7 @@
       </h3>
       <ArtistList :items="item.similarArtist" />
     </template>
-  </div>
+  </ContentLoader>
 </template>
 <script lang="ts">
   import Vue from 'vue'

src/library/genre/GenreDetails.vue

@@ -14,14 +14,14 @@
       </li>
     </ul>
     <template v-if="section === 'tracks'">
-      <Spinner v-slot="{ data }" :data="tracks">
-        <TrackList :tracks="data" />
-      </Spinner>
+      <ContentLoader #default :loading="tracks == null">
+        <TrackList :tracks="tracks" />
+      </ContentLoader>
     </template>
     <template v-else>
-      <Spinner v-slot="{ data }" :data="albums">
-        <AlbumList :items="data" />
-      </Spinner>
+      <ContentLoader #default :loading="albums == null">
+        <AlbumList :items="albums" />
+      </ContentLoader>
     </template>
   </div>
 </template>

src/library/genre/GenreLibrary.vue

@@ -15,7 +15,6 @@
   import Vue from 'vue'
 
   export default Vue.extend({
-    components: {},
     data() {
       return {
         items: [],