Persist lyrics queries in indexeddb

src/renderer/api/query-keys.ts

@@ -208,7 +208,7 @@ export const queryKeys: Record<
             return [serverId, 'songs', 'list'] as const;
         },
         lyrics: (serverId: string, query?: LyricsQuery) => {
-            if (query) return [serverId, 'song', 'lyrics', query] as const;
+            if (query) return [serverId, 'song', 'lyrics', 'select', query] as const;
             return [serverId, 'song', 'lyrics'] as const;
         },
         lyricsByRemoteId: (searchQuery: { remoteSongId: string; remoteSource: LyricSource }) => {

src/renderer/features/lyrics/queries/lyric-query.ts

@@ -86,7 +86,7 @@ export const useSongLyricsBySong = (
     const server = getServerById(song?.serverId);
 
     return useQuery({
-        cacheTime: 1000 * 60 * 10,
+        cacheTime: Infinity,
         enabled: !!song && !!server,
         onError: () => {},
         queryFn: async ({ signal }) => {
@@ -138,7 +138,7 @@ export const useSongLyricsBySong = (
             return null;
         },
         queryKey: queryKeys.songs.lyrics(server?.id || '', query),
-        staleTime: 1000 * 60 * 2,
+        staleTime: Infinity,
     });
 };
 

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

@@ -146,7 +146,7 @@ export const SynchronizedLyrics = ({
                 'sychronized-lyrics-scroll-container',
             ) as HTMLElement;
             const currentLyric = document.querySelector(`#lyric-${index}`) as HTMLElement;
-            const offsetTop = currentLyric?.offsetTop - doc?.clientHeight / 2 ?? 0;
+            const offsetTop = currentLyric.offsetTop - doc.clientHeight / 2 ?? 0;
 
             if (currentLyric === null) {
                 lyricRef.current = undefined;

src/renderer/index.tsx

@@ -1,19 +1,68 @@
 import { Notifications } from '@mantine/notifications';
-import { QueryClientProvider } from '@tanstack/react-query';
+import {
+    PersistedClient,
+    Persister,
+    PersistQueryClientProvider,
+} from '@tanstack/react-query-persist-client';
+import { get, set, del } from 'idb-keyval';
 import { createRoot } from 'react-dom/client';
 import { App } from './app';
 import { queryClient } from './lib/react-query';
+
 import 'overlayscrollbars/overlayscrollbars.css';
 
+export function createIDBPersister(idbValidKey: IDBValidKey = 'reactQuery') {
+    return {
+        persistClient: async (client: PersistedClient) => {
+            set(idbValidKey, client);
+        },
+        removeClient: async () => {
+            await del(idbValidKey);
+        },
+        restoreClient: async () => {
+            // eslint-disable-next-line no-return-await
+            return await get<PersistedClient>(idbValidKey);
+        },
+    } as Persister;
+}
+
+const indexedDbPersister = createIDBPersister('feishin');
+
 const container = document.getElementById('root')! as HTMLElement;
 const root = createRoot(container);
 
 root.render(
-    <QueryClientProvider client={queryClient}>
+    <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{
+            buster: 'feishin',
+            dehydrateOptions: {
+                dehydrateQueries: true,
+                shouldDehydrateQuery: (query) => {
+                    const isSuccess = query.state.status === 'success';
+                    const isLyricsQueryKey =
+                        query.queryKey.includes('song') &&
+                        query.queryKey.includes('lyrics') &&
+                        query.queryKey.includes('select');
+
+                    return isSuccess && isLyricsQueryKey;
+                },
+            },
+            hydrateOptions: {
+                defaultOptions: {
+                    queries: {
+                        cacheTime: Infinity,
+                    },
+                },
+            },
+            maxAge: Infinity,
+            persister: indexedDbPersister,
+        }}
+    >
         <Notifications
             containerWidth="300px"
             position="bottom-center"
         />
         <App />
-    </QueryClientProvider>,
+    </PersistQueryClientProvider>,
 );