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:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user