add infinite loading to album view

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,