fix(08-02): revert repeat() inside lit-virtualizer, restore .renderItem + .keyFunction

repeat() as child content of lit-virtualizer bypasses virtualization,
rendering ALL items instead of only visible ones. This caused 2+ minute
loading times and UI freezing with large libraries.

The correct approach: use lit-virtualizer's native .renderItem and
.keyFunction properties which integrate with its scroll-based viewport
management.
This commit is contained in:
2026-03-05 08:46:01 -05:00
parent 1303422e69
commit 72ef719ba7
5 changed files with 21 additions and 40 deletions
@@ -10,7 +10,6 @@ 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,
@@ -1217,13 +1216,11 @@ export class ArtistsView
>
<lit-virtualizer
.items=${entries}
.renderItem=${(entry: ArtistEntry) => this.renderArtistCard(entry)}
.keyFunction=${(entry: ArtistEntry) => entry.artist.ID}
.layout=${this.gridLayout}
@visibilityChanged=${this.onVisibilityChanged}
>${repeat(
entries,
(entry) => entry.artist.ID,
(entry) => this.renderArtistCard(entry),
)}</lit-virtualizer>
></lit-virtualizer>
</div>
${this.renderContextMenu()}
`;