prevent initially rendering non-sync romaji generated lyrics on karaoke lyrics

src/renderer/features/lyrics/karaoke-lyric-line.tsx

@@ -193,11 +193,13 @@ export const KaraokeLyricLine = memo(
             [fontSize, alignment],
         );
 
-        const hasSyncedRomaji = romajiCueLines != null;
+        const hasSyncedRomajiOverlay = romajiCueLines !== undefined;
         const hasSyncedPronunciation = hasSyncedOverlayCueLines(pronunciationCueLines);
         const hasSyncedTranslation = hasSyncedOverlayCueLines(translationCueLines);
         const pronunciationFallbackText =
-            !hasSyncedRomaji && !hasSyncedPronunciation ? (pronunciationText ?? romajiText) : null;
+            !hasSyncedRomajiOverlay && !hasSyncedPronunciation
+                ? (pronunciationText ?? romajiText)
+                : null;
 
         return (
             <Box

src/renderer/features/lyrics/lyrics.tsx

@@ -136,7 +136,10 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
     }, [data, indexToUse, preferLocalLyrics]);
 
     const { data: furiganaConvertedLyrics } = useFuriganaLyrics(lyrics?.lyrics, !!enableFurigana);
-    const { data: romajiConvertedLyrics } = useRomajiLyrics(lyrics?.lyrics, !!enableRomaji);
+    const { data: romajiConvertedLyrics, isFetching: isFetchingRomaji } = useRomajiLyrics(
+        lyrics?.lyrics,
+        !!enableRomaji,
+    );
 
     const rawSyncedLyrics = useMemo(() => {
         if (!synced || !lyrics || !('lyrics' in lyrics) || !Array.isArray(lyrics.lyrics)) {
@@ -226,12 +229,15 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
     const displayOffsetMs = isLyricsDisabled ? 0 : currentOffsetMs;
     const useServerPronunciation = !!pronunciationLyricsOverlay;
 
-    const { data: syncedRomajiLyrics } = useSyncedRomajiLyrics(
+    const shouldGenerateSyncedRomaji =
-        rawSyncedLyrics,
         !!enableRomaji &&
-            !!rawSyncedLyrics &&
+        !!rawSyncedLyrics &&
-            lyricsHasWordCues(rawSyncedLyrics) &&
+        lyricsHasWordCues(rawSyncedLyrics) &&
-            !useServerPronunciation,
+        !useServerPronunciation;
+
+    const { data: syncedRomajiLyrics, isFetching: isFetchingSyncedRomaji } = useSyncedRomajiLyrics(
+        rawSyncedLyrics,
+        shouldGenerateSyncedRomaji,
     );
 
     const isKaraoke = useMemo(() => {
@@ -253,12 +259,11 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
             offsetMs: displayOffsetMs,
             pronunciationLyrics: pronunciationLyricsOverlay,
             romajiLyrics:
-                enableRomaji && !useServerPronunciation
+                enableRomaji && !useServerPronunciation && !shouldGenerateSyncedRomaji
                     ? (romajiConvertedLyrics as SynchronizedLyricsProps['romajiLyrics'])
                     : null,
             settingsKey,
-            syncedRomajiLyrics:
+            syncedRomajiLyrics: shouldGenerateSyncedRomaji ? (syncedRomajiLyrics ?? null) : null,
-                enableRomaji && !useServerPronunciation ? (syncedRomajiLyrics ?? null) : null,
             translatedLyrics:
                 showTranslation && !translationLyricsOverlay ? translatedLyrics : null,
             translationLyrics: translationLyricsOverlay,
@@ -271,6 +276,7 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
         isKaraoke,
         pronunciationLyricsOverlay,
         romajiConvertedLyrics,
+        shouldGenerateSyncedRomaji,
         syncedRomajiLyrics,
         settingsKey,
         showTranslation,
@@ -428,8 +434,14 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
         return [];
     }, [data?.local]);
 
+    const isWaitingForRomaji =
+        !!enableRomaji &&
+        !!lyrics &&
+        (isFetchingRomaji || (shouldGenerateSyncedRomaji && isFetchingSyncedRomaji));
+
     const isLoadingLyrics =
-        shouldFetchLyrics && (isWaitingToFetchLyrics || isLoading || isRefetching);
+        shouldFetchLyrics &&
+        (isWaitingToFetchLyrics || isLoading || isRefetching || isWaitingForRomaji);
     const hasNoLyrics = !displayLyrics;
     const [shouldFadeOut, setShouldFadeOut] = useState(false);
 

src/renderer/features/lyrics/styles/karaoke-animation.css

@@ -68,17 +68,17 @@
 }
 
 .karaoke-word.karaoke-overlay-pronunciation {
-    font-size: 0.8em;
+    font-size: inherit;
     font-weight: 600;
 }
 
 .karaoke-word.karaoke-overlay-translation {
-    font-size: 0.85em;
+    font-size: inherit;
     font-weight: 500;
 }
 
 .karaoke-word.karaoke-overlay-generic {
-    font-size: 0.8em;
+    font-size: inherit;
     font-weight: 500;
 }
 

src/renderer/features/lyrics/synchronized-karaoke-lyrics.tsx

@@ -360,11 +360,15 @@ export const SynchronizedKaraokeLyrics = ({
                         lineStartMs,
                         idx,
                     );
+                    const lineLevelRomaji =
+                        syncedRomajiLyrics == null && romajiLyrics?.[idx]
+                            ? getLyricLineText(romajiLyrics[idx])
+                            : undefined;
                     const pronunciationText = getOverlayText(
                         pronunciationLyrics,
                         lineStartMs,
                         idx,
-                        romajiLyrics?.[idx] ? getLyricLineText(romajiLyrics[idx]) : undefined,
+                        lineLevelRomaji,
                     );
                     const translationText = getOverlayText(
                         translationLyrics,
@@ -407,7 +411,11 @@ export const SynchronizedKaraokeLyrics = ({
                             lineIndex={idx}
                             pronunciationCueLines={pronunciationCueLines}
                             pronunciationText={pronunciationText}
-                            romajiCueLines={syncedRomajiLyrics?.[idx] ?? null}
+                            romajiCueLines={
+                                syncedRomajiLyrics != null
+                                    ? (syncedRomajiLyrics[idx] ?? null)
+                                    : undefined
+                            }
                             translatedText={translationText}
                             translationCueLines={translationCueLines}
                         />