rework spinners

src/home/Home.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <Spinner v-if="loading" />
-    <template v-else>
+  <div v-if="!loading">
     <div v-for="section in sections" :key="section.key" class="mb-4">
       <template v-if="result[section.key].length > 0">
         <h1>
@@ -16,7 +14,6 @@
         <AlbumList :items="result[section.key]" />
       </template>
     </div>
-    </template>
   </div>
 </template>
 <script lang="ts">

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: [],

src/playlist/Playlist.vue

@@ -1,21 +1,21 @@
 <template>
-  <Spinner v-slot="{ data }" :data="playlist">
+  <ContentLoader #default :loading="playlist == null">
     <div class="d-flex justify-content-between">
-      <h1>{{ data.name }}</h1>
+      <h1>{{ playlist.name }}</h1>
       <OverflowMenu>
         <b-dropdown-item-btn variant="danger" @click="deletePlaylist()">
           Delete playlist
         </b-dropdown-item-btn>
       </OverflowMenu>
     </div>
-    <TrackList :tracks="data.tracks" @remove="remove(index)">
+    <TrackList :tracks="playlist.tracks" @remove="remove(index)">
       <template v-slot:context-menu="{index}">
         <b-dropdown-item-button @click="remove(index)">
           Remove
         </b-dropdown-item-button>
       </template>
     </TrackList>
-  </Spinner>
+  </ContentLoader>
 </template>
 <script lang="ts">
   import Vue from 'vue'

src/search/SearchResult.vue

@@ -1,20 +1,18 @@
 <template>
-  <div v-if="result">
+  <ContentLoader #default :loading="result == null">
     <div v-if="result.artists.length > 0" class="mb-5">
       <h1>Artists</h1>
       <ArtistList :items="result.artists" />
     </div>
-
     <div v-if="result.albums.length > 0" class="mb-5">
       <h1>Albums</h1>
       <AlbumList :items="result.albums" />
     </div>
-
     <div v-if="result.tracks.length > 0">
       <h1>Tracks</h1>
       <TrackList :tracks="result.tracks" />
     </div>
-  </div>
+  </ContentLoader>
 </template>
 <script lang="ts">
   import Vue from 'vue'

src/shared/components/ContentLoader.vue

@@ -0,0 +1,8 @@
+<template functional>
+  <div>
+    <div v-if="props.loading" class="d-flex justify-content-center">
+      <span class="spinner-border" />
+    </div>
+    <slot v-else />
+  </div>
+</template>

src/shared/components/Spinner.vue

@@ -1,12 +0,0 @@
-<template functional>
-  <div>
-    <slot v-if="props.data" :data="props.data" />
-    <div v-else class="text-center">
-      <span class="spinner-grow" />
-    </div>
-  </div>
-</template>
-<script lang="ts">
-  import Vue from 'vue'
-  export default Vue.extend({})
-</script>

src/shared/components/index.ts

@@ -1,16 +1,16 @@
 import Vue from 'vue'
+import ContentLoader from './ContentLoader.vue'
 import ExternalLink from './ExternalLink.vue'
 import Icon from './Icon.vue'
 import OverflowMenu from './OverflowMenu.vue'
-import Spinner from './Spinner.vue'
 import Tiles from './Tiles.vue'
 import Tile from './Tile.vue'
 
 const components = {
+  ContentLoader,
   ExternalLink,
   Icon,
   OverflowMenu,
-  Spinner,
   Tiles,
   Tile,
 }