From 032c17acf4a2b99030e96bfd14b0b2ab40cb6305 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 9 Jul 2026 00:46:31 -0700
Subject: [PATCH] fix lyrics loading state

---
 src/renderer/features/lyrics/lyrics.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/renderer/features/lyrics/lyrics.tsx b/src/renderer/features/lyrics/lyrics.tsx
index 1a58f9c42..257ed939b 100644
--- a/src/renderer/features/lyrics/lyrics.tsx
+++ b/src/renderer/features/lyrics/lyrics.tsx
@@ -108,7 +108,10 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
         return queryKeys.songs.lyrics(currentSong._serverId, { songId: currentSong.id });
     }, [currentSong]);
 
-    const { data, isLoading } = useQuery(
+    const shouldFetchLyrics = !isLyricsDisabled && !!currentSong?._serverId && !!currentSong?.id;
+    const isWaitingToFetchLyrics = shouldFetchLyrics && pendingSongId !== currentSong?.id;
+
+    const { data, isFetching, isLoading } = useQuery(
         lyricsQueries.songLyrics(
             {
                 options: {
@@ -379,7 +382,9 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
         return [];
     }, [data?.local]);
 
-    const isLoadingLyrics = isLoading && !isLyricsDisabled;
+    const isLoadingLyrics =
+        shouldFetchLyrics &&
+        (isWaitingToFetchLyrics || isLoading || (isFetching && !displayLyrics));
     const hasNoLyrics = !displayLyrics;
     const [shouldFadeOut, setShouldFadeOut] = useState(false);
 
@@ -431,7 +436,7 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
                 ) : (
                     <AnimatePresence mode="sync">
                         {hasNoLyrics ? (
-                            <Center w="100%">
+                            <Center flex={1} w="100%">
                                 <motion.div
                                     animate={{ opacity: shouldFadeOut ? 0 : 1 }}
                                     initial={{ opacity: 1 }}