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
@@ -26,7 +26,6 @@ import {
DEFAULT_COLUMN_IDS,
} from './columns';
import type { ColumnDef } from './columns';
import { repeat } from 'lit/directives/repeat.js';
import { classMap } from 'lit/directives/class-map.js';
import {
rankTracks,
@@ -1738,12 +1737,10 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
<lit-virtualizer
scroller
.items=${visibleTracks}
.renderItem=${this.renderTrackRow}
.keyFunction=${(track: library.Track) => track.FilePath}
.layout=${this.flowLayout}
>${repeat(
visibleTracks,
(track) => track.FilePath,
(track, index) => this.renderTrackRow(track, index),
)}</lit-virtualizer>
></lit-virtualizer>
`}
${this.searchCtrl.term && visibleTracks.length > 0