diff --git a/src/library/genre/GenreDetails.vue b/src/library/genre/GenreDetails.vue
index 7dc7067..5ece7a1 100644
--- a/src/library/genre/GenreDetails.vue
+++ b/src/library/genre/GenreDetails.vue
@@ -14,12 +14,12 @@
       </li>
     </ul>
     <template v-if="section === 'tracks'">
-      <ContentLoader v-slot :loading="tracks == null">
-        <TrackList :tracks="tracks" />
-      </ContentLoader>
+      <InfiniteList v-slot="{ items }" key="tracks" :load="loadTracks">
+        <TrackList :tracks="items" />
+      </InfiniteList>
     </template>
     <template v-else>
-      <InfiniteList v-slot="{ items }" :load="loadAlbums">
+      <InfiniteList v-slot="{ items }" key="albums" :load="loadAlbums">
         <AlbumList :items="items" />
       </InfiniteList>
     </template>
@@ -41,20 +41,13 @@
       id: { type: String, required: true },
       section: { type: String, default: '' },
     },
-    data() {
-      return {
-        tracks: null as null | any[],
-      }
-    },
-    created() {
-      this.$api.getTracksByGenre(this.id).then(result => {
-        this.tracks = result
-      })
-    },
     methods: {
       loadAlbums(offset: number) {
         return this.$api.getAlbumsByGenre(this.id, 50, offset)
-      }
+      },
+      loadTracks(offset: number) {
+        return this.$api.getTracksByGenre(this.id, 50, offset)
+      },
     }
   })
 </script>
diff --git a/src/shared/api.ts b/src/shared/api.ts
index 6276597..e04c4ac 100644
--- a/src/shared/api.ts
+++ b/src/shared/api.ts
@@ -126,11 +126,11 @@ export class API {
     return (response.albumList2?.album || []).map(this.normalizeAlbum, this)
   }
 
-  async getTracksByGenre(id: string) {
+  async getTracksByGenre(id: string, size: number, offset = 0) {
     const params = {
       genre: id,
-      count: 500,
-      offset: 0,
+      count: size,
+      offset,
     }
     const response = await this.get('rest/getSongsByGenre', params)
     return (response.songsByGenre?.song || []).map(this.normalizeTrack, this)