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