perf(08-03): optimize column rendering and apply classMap to queue-panel renderTrackItem

- Hoist searchCtrl.term lookup outside per-column loop in renderTrackRow
- Search highlighting already short-circuits when search term is empty
- Import classMap in queue-panel.ts
- Replace array filter/join class construction with classMap in renderTrackItem
- Eliminates per-row array allocation in queue panel render hot path
This commit is contained in:
2026-03-04 23:21:56 -05:00
parent ad210278fc
commit 62f41c2491
2 changed files with 27 additions and 29 deletions
@@ -1572,25 +1572,26 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
variant=${favVariant}
></wa-icon>
</div>
${cols.map((col) => {
const val = col.accessor(track);
const centered = val === '\u2014';
const term =
this.searchCtrl.term;
const display = term
? highlightText(val, term)
: val;
${(() => {
const term = this.searchCtrl.term;
return cols.map((col) => {
const val = col.accessor(track);
const centered = val === '\u2014';
const display = term
? highlightText(val, term)
: val;
return html`
<div class=${classMap({
cell: true,
'cell-center': centered,
'cell-right': !centered && col.align === 'right',
})}>
${display}
</div>
`;
})}
return html`
<div class=${classMap({
cell: true,
'cell-center': centered,
'cell-right': !centered && col.align === 'right',
})}>
${display}
</div>
`;
});
})()}
</div>
`;
};