diff --git a/frontend/src/components/artists-view/artists-view.ts b/frontend/src/components/artists-view/artists-view.ts
index 89c1b53..24bc7de 100644
--- a/frontend/src/components/artists-view/artists-view.ts
+++ b/frontend/src/components/artists-view/artists-view.ts
@@ -10,6 +10,7 @@ import type {
VisibilityChangedEvent,
} from '@lit-labs/virtualizer';
import { grid } from '@lit-labs/virtualizer/layouts/grid.js';
+import { repeat } from 'lit/directives/repeat.js';
import {
GetAlbumsByArtist,
GetAlbumTracks,
@@ -1216,15 +1217,13 @@ export class ArtistsView
>
- this.renderArtistCard(
- entry,
- )}
.layout=${this.gridLayout}
@visibilityChanged=${this.onVisibilityChanged}
- >
+ >${repeat(
+ entries,
+ (entry) => entry.artist.ID,
+ (entry) => this.renderArtistCard(entry),
+ )}
${this.renderContextMenu()}
`;
diff --git a/frontend/src/components/cover-grid/cover-grid.ts b/frontend/src/components/cover-grid/cover-grid.ts
index 43fa794..5a38346 100644
--- a/frontend/src/components/cover-grid/cover-grid.ts
+++ b/frontend/src/components/cover-grid/cover-grid.ts
@@ -11,6 +11,7 @@ import type {
VisibilityChangedEvent,
} from '@lit-labs/virtualizer';
import { grid } from '@lit-labs/virtualizer/layouts/grid.js';
+import { repeat } from 'lit/directives/repeat.js';
import { GetAlbumTracks } from '@go/library/Library';
import { library } from '@go/models';
import { LibraryController } from '@store/controllers/library-controller';
@@ -924,12 +925,6 @@ export class CoverGrid
);
}
- private gridKeyFunction = (
- entry: GridEntry,
- ) => {
- return `a-${entry.album.ID}`;
- };
-
/* ====================================================================
* Dropdown (expand/collapse)
* ==================================================================== */
@@ -1853,15 +1848,17 @@ export class CoverGrid
+ >${repeat(
+ this.buildGridEntries(),
+ (entry) => entry.album.ID,
+ (entry) => this.renderGridEntry(entry),
+ )}
`;
}
@@ -1880,15 +1877,17 @@ export class CoverGrid
+ >${repeat(
+ this.getBeforeEntries(),
+ (entry) => entry.album.ID,
+ (entry) => this.renderGridEntry(entry),
+ )}
+ >${repeat(
+ afterEntries,
+ (entry) => entry.album.ID,
+ (entry) => this.renderGridEntry(entry),
+ )}
`
: nothing}
`;
diff --git a/frontend/src/components/genres-view/genres-view.ts b/frontend/src/components/genres-view/genres-view.ts
index 7248385..5276d57 100644
--- a/frontend/src/components/genres-view/genres-view.ts
+++ b/frontend/src/components/genres-view/genres-view.ts
@@ -10,6 +10,7 @@ import type {
VisibilityChangedEvent,
} from '@lit-labs/virtualizer';
import { grid } from '@lit-labs/virtualizer/layouts/grid.js';
+import { repeat } from 'lit/directives/repeat.js';
import { GetTracksByGenre } from '@go/library/Library';
import type { library } from '@go/models';
import { LibraryController } from '@store/controllers/library-controller';
@@ -1168,13 +1169,13 @@ export class GenresView
>
- this.renderGenreCard(entry)}
.layout=${this.gridLayout}
@visibilityChanged=${this.onVisibilityChanged}
- >
+ >${repeat(
+ entries,
+ (entry) => entry.genre.name,
+ (entry) => this.renderGenreCard(entry),
+ )}
${this.renderContextMenu()}
`;