[web] Confine the use of VueEternalLoading to one component

web-src/src/components/ListAlbumsSpotify.vue

@@ -13,6 +13,7 @@
     @open="open(item)"
     @open-details="openDetails(item)"
   />
+  <loader-list-item :load="load" :loaded="loaded" />
   <modal-dialog-album-spotify
     :item="selectedItem"
     :show="showDetailsModal"
@@ -22,13 +23,18 @@
 
 <script>
 import ListItem from '@/components/ListItem.vue'
+import LoaderListItem from '@/components/LoaderListItem.vue'
 import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
 import { useSettingsStore } from '@/stores/settings'
 
 export default {
   name: 'ListAlbumsSpotify',
-  components: { ListItem, ModalDialogAlbumSpotify },
-  props: { items: { required: true, type: Object } },
+  components: { ListItem, LoaderListItem, ModalDialogAlbumSpotify },
+  props: {
+    items: { required: true, type: Object },
+    load: { default: null, type: Function },
+    loaded: { default: true, type: Boolean }
+  },
   setup() {
     return { settingsStore: useSettingsStore() }
   },

web-src/src/components/ListArtistsSpotify.vue

@@ -8,6 +8,7 @@
     @open="open(item)"
     @open-details="openDetails(item)"
   />
+  <loader-list-item :load="load" :loaded="loaded" />
   <modal-dialog-artist-spotify
     :item="selectedItem"
     :show="showDetailsModal"
@@ -17,13 +18,17 @@
 
 <script>
 import ListItem from '@/components/ListItem.vue'
+import LoaderListItem from '@/components/LoaderListItem.vue'
 import ModalDialogArtistSpotify from '@/components/ModalDialogArtistSpotify.vue'
 
 export default {
   name: 'ListArtistsSpotify',
-  components: { ListItem, ModalDialogArtistSpotify },
-  props: { items: { required: true, type: Object } },
-
+  components: { ListItem, LoaderListItem, ModalDialogArtistSpotify },
+  props: {
+    items: { required: true, type: Object },
+    load: { default: null, type: Function },
+    loaded: { default: true, type: Boolean }
+  },
   data() {
     return { selectedItem: {}, showDetailsModal: false }
   },

web-src/src/components/ListPlaylistsSpotify.vue

@@ -8,6 +8,7 @@
     @open="open(item)"
     @open-details="openDetails(item)"
   />
+  <loader-list-item :load="load" :loaded="loaded" />
   <modal-dialog-playlist-spotify
     :item="selectedItem"
     :show="showDetailsModal"
@@ -17,12 +18,17 @@
 
 <script>
 import ListItem from '@/components/ListItem.vue'
+import LoaderListItem from '@/components/LoaderListItem.vue'
 import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
 
 export default {
   name: 'ListPlaylistsSpotify',
-  components: { ListItem, ModalDialogPlaylistSpotify },
-  props: { items: { required: true, type: Object } },
+  components: { ListItem, LoaderListItem, ModalDialogPlaylistSpotify },
+  props: {
+    items: { required: true, type: Object },
+    load: { default: null, type: Function },
+    loaded: { default: true, type: Boolean }
+  },
 
   data() {
     return { selectedItem: {}, showDetailsModal: false }

web-src/src/components/ListTracksSpotify.vue

@@ -19,6 +19,7 @@
       />)
     </template>
   </list-item>
+  <loader-list-item :load="load" :loaded="loaded" />
   <modal-dialog-track-spotify
     :item="selectedItem"
     :show="showDetailsModal"
@@ -28,15 +29,18 @@
 
 <script>
 import ListItem from '@/components/ListItem.vue'
+import LoaderListItem from '@/components/LoaderListItem.vue'
 import ModalDialogTrackSpotify from '@/components/ModalDialogTrackSpotify.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ListTracksSpotify',
-  components: { ListItem, ModalDialogTrackSpotify },
+  components: { ListItem, LoaderListItem, ModalDialogTrackSpotify },
   props: {
     contextUri: { default: '', type: String },
-    items: { required: true, type: Object }
+    items: { required: true, type: Object },
+    load: { default: null, type: Function },
+    loaded: { default: true, type: Boolean }
   },
   data() {
     return { selectedItem: {}, showDetailsModal: false }

web-src/src/components/LoaderListItem.vue

@@ -0,0 +1,30 @@
+<template>
+  <vue-eternal-loading v-if="load && !loaded" :load="load">
+    <template #loading>
+      <div class="columns is-centered">
+        <div class="column has-text-centered">
+          <mdicon class="icon mdi-spin" name="loading" />
+        </div>
+      </div>
+    </template>
+    <template #no-more>
+      <br />
+    </template>
+    <template #no-results>
+      <br />
+    </template>
+  </vue-eternal-loading>
+</template>
+
+<script>
+import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
+
+export default {
+  name: 'LoaderListItem',
+  components: { VueEternalLoading },
+  props: {
+    load: { default: null, type: Function },
+    loaded: { default: true, type: Boolean }
+  }
+}
+</script>