From a5100a329a13a4aebd69ace5a7f4a5d2b3e86ca6 Mon Sep 17 00:00:00 2001
From: Afonso Jorge Ramos <afonsojorgeramos@gmail.com>
Date: Tue, 12 May 2026 17:53:06 +0100
Subject: [PATCH] perf(page): memoize lyrics sidebar lines projection

---
 src/routes/+page.svelte | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 382ed5685..58631dc5a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1104,6 +1104,14 @@
   let lyricsActiveProgress = $state(0);
   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');
 
   async function loadFavoritesDefaultTab(): Promise<void> {
@@ -6653,7 +6661,7 @@
       <LyricsSidebar
         title={currentTrack?.title}
         artist={currentTrack?.artist}
-        lines={lyricsLines.map(l => ({ text: l.text, timeMs: l.timeMs, endMs: l.endMs }))}
+        lines={lyricsSidebarLines}
         activeIndex={lyricsActiveIndex}
         activeProgress={lyricsActiveProgress}
         isSynced={lyricsIsSynced}