add infinite loading to album view

src/library/album/AlbumLibrary.vue

@@ -7,9 +7,8 @@
         </router-link>
       </li>
     </ul>
-    <ContentLoader #default :loading="albums == null">
-      <AlbumList :items="albums" />
-    </ContentLoader>
+    <AlbumList :items="albums" />
+    <InfiniteLoader :key="sort" :loading="loading" :has-more="hasMore" @loadMore="loadMore" />
   </div>
 </template>
 <script lang="ts">
@@ -26,7 +25,10 @@
     },
     data() {
       return {
-        albums: null as null | Album[],
+        albums: [] as | Album[],
+        loading: false,
+        offset: 0 as number,
+        hasMore: true,
       }
     },
     computed: {
@@ -42,14 +44,23 @@
     },
     watch: {
       sort: {
-        immediate: true,
-        handler(value: AlbumSort) {
-          this.albums = null
-          this.$api.getAlbums(value).then(albums => {
-            this.albums = albums
-          })
+        handler() {
+          this.albums = []
+          this.offset = 0
+          this.hasMore = true
         }
       }
     },
+    methods: {
+      loadMore() {
+        this.loading = true
+        this.$api.getAlbums(this.sort as AlbumSort, 50, this.offset).then(albums => {
+          this.albums.push(...albums)
+          this.offset += albums.length
+          this.hasMore = albums.length > 0
+          this.loading = false
+        })
+      }
+    }
   })
 </script>

src/shared/api.ts

@@ -142,7 +142,7 @@ export class API {
       .map(this.normalizeArtist, this)
   }
 
-  async getAlbums(sort: AlbumSort, size = 500): Promise<Album[]> {
+  async getAlbums(sort: AlbumSort, size: number, offset = 0): Promise<Album[]> {
     const type = {
       'a-z': 'alphabeticalByName',
       'recently-added': 'newest',
@@ -151,11 +151,7 @@ export class API {
       random: 'random',
     }[sort]
 
-    const params = {
-      type,
-      offset: '0',
-      size: size,
-    }
+    const params = { type, offset, size }
     const response = await this.get('rest/getAlbumList2', params)
     const albums = response.albumList2?.album || []
     return albums.map(this.normalizeAlbum, this)

src/shared/components/InfiniteLoader.vue

@@ -0,0 +1,52 @@
+<template>
+  <infinite-loading ref="inf" force-use-infinite-wrapper @infinite="loadMore">
+    <template slot="spinner">
+      <div class="d-flex justify-content-center my-4">
+        <span class="spinner-border" />
+      </div>
+    </template>
+    <template slot="no-more">
+      <span />
+    </template>
+    <template slot="no-results">
+      <span />
+    </template>
+  </infinite-loading>
+</template>
+<script lang="ts">
+  import Vue from 'vue'
+  import InfiniteLoading from 'vue-infinite-loading'
+
+  export default Vue.extend({
+    components: {
+      InfiniteLoading,
+    },
+    props: {
+      loading: { type: Boolean, required: true },
+      hasMore: { type: Boolean, required: true },
+    },
+    watch: {
+      loading: {
+        handler(value: boolean) {
+          if (!this.hasMore) {
+            (this.$refs.inf as any).stateChanger.complete()
+          } else if (!value) {
+            (this.$refs.inf as any).stateChanger.loaded()
+          }
+        }
+      },
+      hasMore: {
+        handler(value: boolean) {
+          if (!value) {
+            (this.$refs.inf as any).stateChanger.complete()
+          }
+        }
+      }
+    },
+    methods: {
+      loadMore() {
+        this.$emit('loadMore')
+      },
+    }
+  })
+</script>

src/shared/components/index.ts

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import ContentLoader from './ContentLoader.vue'
 import ExternalLink from './ExternalLink.vue'
 import Icon from './Icon.vue'
+import InfiniteLoader from './InfiniteLoader.vue'
 import OverflowMenu from './OverflowMenu.vue'
 import Tiles from './Tiles.vue'
 import Tile from './Tile.vue'
@@ -10,6 +11,7 @@ const components = {
   ContentLoader,
   ExternalLink,
   Icon,
+  InfiniteLoader,
   OverflowMenu,
   Tiles,
   Tile,