perf(08-02): migrate track-list and queue-panel virtualizers to repeat() directive

- track-list uses repeat() with FilePath key for efficient DOM reuse
- queue-panel uses repeat() with QueueTrack.id key
- Removed .renderItem property, kept .items for virtualization sizing
This commit is contained in:
2026-03-04 23:15:09 -05:00
parent 1444a66bb2
commit d2d7d8c6ce
2 changed files with 12 additions and 5 deletions
@@ -15,6 +15,7 @@ import type { PlaylistPicker } from '@components/playlist-picker/playlist-picker
import '@lit-labs/virtualizer'; import '@lit-labs/virtualizer';
import type { LitVirtualizer } from '@lit-labs/virtualizer'; import type { LitVirtualizer } from '@lit-labs/virtualizer';
import { flow } from '@lit-labs/virtualizer/layouts/flow.js'; import { flow } from '@lit-labs/virtualizer/layouts/flow.js';
import { repeat } from 'lit/directives/repeat.js';
import type { QueueTrack } from '@store/queue-store'; import type { QueueTrack } from '@store/queue-store';
import { SelectionController } from '@utils/selection-controller'; import { SelectionController } from '@utils/selection-controller';
import type { SelectionHost } from '@utils/selection-controller'; import type { SelectionHost } from '@utils/selection-controller';
@@ -1282,10 +1283,12 @@ export class QueuePanel
<lit-virtualizer <lit-virtualizer
scroller scroller
.items=${tracks} .items=${tracks}
.renderItem=${this
.renderTrackItem}
.layout=${this.flowLayout} .layout=${this.flowLayout}
></lit-virtualizer> >${repeat(
tracks,
(track) => track.id,
(track, index) => this.renderTrackItem(track, index),
)}</lit-virtualizer>
`} `}
</div> </div>
</div> </div>
@@ -25,6 +25,7 @@ import {
DEFAULT_COLUMN_IDS, DEFAULT_COLUMN_IDS,
} from './columns'; } from './columns';
import type { ColumnDef } from './columns'; import type { ColumnDef } from './columns';
import { repeat } from 'lit/directives/repeat.js';
import { import {
rankTracks, rankTracks,
highlightText, highlightText,
@@ -1736,9 +1737,12 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
<lit-virtualizer <lit-virtualizer
scroller scroller
.items=${visibleTracks} .items=${visibleTracks}
.renderItem=${this.renderTrackRow}
.layout=${this.flowLayout} .layout=${this.flowLayout}
></lit-virtualizer> >${repeat(
visibleTracks,
(track) => track.FilePath,
(track, index) => this.renderTrackRow(track, index),
)}</lit-virtualizer>
`} `}
${this.searchCtrl.term && visibleTracks.length > 0 ${this.searchCtrl.term && visibleTracks.length > 0