perf(page): memoize lyrics sidebar lines projection
This commit is contained in:
1 file changed
+9
-1
@@ -1104,6 +1104,14 @@
|
|||||||
let lyricsActiveProgress = $state(0);
|
let lyricsActiveProgress = $state(0);
|
||||||
let lyricsSidebarVisible = $state(false);
|
let lyricsSidebarVisible = $state(false);
|
||||||
|
|
||||||
|
// Memoize the line projection so the LyricsSidebar's `lines` prop doesn't
|
||||||
|
// get a fresh array reference on every progress tick (which would
|
||||||
|
// re-render the entire <LyricsLines> subtree and thrash the karaoke
|
||||||
|
// animation snapshot).
|
||||||
|
const lyricsSidebarLines = $derived(
|
||||||
|
lyricsLines.map((l) => ({ text: l.text, timeMs: l.timeMs, endMs: l.endMs }))
|
||||||
|
);
|
||||||
|
|
||||||
let favoritesDefaultTab = $state<FavoritesTab>('tracks');
|
let favoritesDefaultTab = $state<FavoritesTab>('tracks');
|
||||||
|
|
||||||
async function loadFavoritesDefaultTab(): Promise<void> {
|
async function loadFavoritesDefaultTab(): Promise<void> {
|
||||||
@@ -6653,7 +6661,7 @@
|
|||||||
<LyricsSidebar
|
<LyricsSidebar
|
||||||
title={currentTrack?.title}
|
title={currentTrack?.title}
|
||||||
artist={currentTrack?.artist}
|
artist={currentTrack?.artist}
|
||||||
lines={lyricsLines.map(l => ({ text: l.text, timeMs: l.timeMs, endMs: l.endMs }))}
|
lines={lyricsSidebarLines}
|
||||||
activeIndex={lyricsActiveIndex}
|
activeIndex={lyricsActiveIndex}
|
||||||
activeProgress={lyricsActiveProgress}
|
activeProgress={lyricsActiveProgress}
|
||||||
isSynced={lyricsIsSynced}
|
isSynced={lyricsIsSynced}
|
||||||
|
|||||||
Reference in new issue
Block a user