fix: avoid pagination until book view is inited, closes #1983 (#1994)

apps/readest-app/src-tauri/src/lib.rs

@@ -268,7 +268,9 @@ pub fn run() {
                 }
                 #[cfg(target_os = "linux")]
                 {
-                    builder = builder.transparent(true).background_color(tauri::window::Color(0, 0, 0, 0));
+                    builder = builder
+                        .transparent(true)
+                        .background_color(tauri::window::Color(0, 0, 0, 0));
                 }
 
                 builder

apps/readest-app/src/app/reader/components/FoliateViewer.tsx

@@ -65,7 +65,7 @@ const FoliateViewer: React.FC<{
   const { themeCode, isDarkMode } = useThemeStore();
   const { settings } = useSettingsStore();
   const { loadCustomFonts, getLoadedFonts } = useCustomFontStore();
-  const { getView, setView: setFoliateView, setProgress } = useReaderStore();
+  const { getView, setView: setFoliateView, setViewInited, setProgress } = useReaderStore();
   const { getViewState, getViewSettings, setViewSettings } = useReaderStore();
   const { getParallels } = useParallelViewStore();
   const { getBookData } = useBookDataStore();
@@ -314,6 +314,7 @@ const FoliateViewer: React.FC<{
       } else {
         await view.goToFraction(0);
       }
+      setViewInited(bookKey, true);
     };
 
     openBook();

apps/readest-app/src/app/reader/hooks/usePagination.ts

@@ -38,13 +38,16 @@ export const usePagination = (
   containerRef: React.RefObject<HTMLDivElement>,
 ) => {
   const { appService } = useEnv();
-  const { getViewSettings } = useReaderStore();
+  const { getViewSettings, getViewState } = useReaderStore();
   const { hoveredBookKey, setHoveredBookKey } = useReaderStore();
   const { acquireVolumeKeyInterception, releaseVolumeKeyInterception } = useDeviceControlStore();
 
   const handlePageFlip = async (
     msg: MessageEvent | CustomEvent | React.MouseEvent<HTMLDivElement, MouseEvent>,
   ) => {
+    const viewState = getViewState(bookKey);
+    if (!viewState?.inited) return;
+
     if (msg instanceof MessageEvent) {
       if (msg.data && msg.data.bookKey === bookKey) {
         const viewSettings = getViewSettings(bookKey)!;

apps/readest-app/src/store/readerStore.ts

@@ -26,6 +26,7 @@ interface ViewState {
   view: FoliateView | null;
   isPrimary: boolean;
   loading: boolean;
+  inited: boolean;
   error: string | null;
   progress: BookProgress | null;
   ribbonVisible: boolean;
@@ -73,6 +74,7 @@ interface ReaderStore {
   getViewState: (key: string) => ViewState | null;
   getGridInsets: (key: string) => Insets | null;
   setGridInsets: (key: string, insets: Insets | null) => void;
+  setViewInited: (key: string, inited: boolean) => void;
 }
 
 export const useReaderStore = create<ReaderStore>((set, get) => ({
@@ -116,6 +118,7 @@ export const useReaderStore = create<ReaderStore>((set, get) => ({
           view: null,
           isPrimary: false,
           loading: true,
+          inited: false,
           error: null,
           progress: null,
           ribbonVisible: false,
@@ -173,6 +176,7 @@ export const useReaderStore = create<ReaderStore>((set, get) => ({
             view: null,
             isPrimary,
             loading: false,
+            inited: false,
             error: null,
             progress: null,
             ribbonVisible: false,
@@ -193,6 +197,7 @@ export const useReaderStore = create<ReaderStore>((set, get) => ({
             view: null,
             isPrimary: false,
             loading: false,
+            inited: false,
             error: 'Failed to load book.',
             progress: null,
             ribbonVisible: false,
@@ -339,4 +344,15 @@ export const useReaderStore = create<ReaderStore>((set, get) => ({
         },
       },
     })),
+
+  setViewInited: (key: string, inited: boolean) =>
+    set((state) => ({
+      viewStates: {
+        ...state.viewStates,
+        [key]: {
+          ...state.viewStates[key]!,
+          inited,
+        },
+      },
+    })),
 }));