Fix restoring initial page in vertical and horizontal pager (#622)

The initial page was scrolled into view before it had a height which resulted in the scroll position to stay at the top of the screen

src/components/reader/pager/HorizontalPager.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { MouseEvent as ReactMouseEvent, useEffect, useRef } from 'react';
+import { MouseEvent as ReactMouseEvent, useEffect, useLayoutEffect, useRef } from 'react';
 import { Box } from '@mui/material';
 import { IReaderProps } from '@/typings';
 import { Page } from '@/components/reader/Page';
@@ -107,12 +107,18 @@ export function HorizontalPager(props: IReaderProps) {
         }
     };
 
-    useEffect(() => {
+    useLayoutEffect(() => {
-        // Delay scrolling to next cycle
+        const initialPageElement = pagesRef.current[initialPage];
-        setTimeout(() => {
+        if (!initialPageElement) {
-            // scroll last read page into view when initialPage changes
+            return () => {};
-            pagesRef.current[initialPage]?.scrollIntoView({ inline: 'center' });
+        }
-        }, 0);
+
+        const resizeObserver = new ResizeObserver(() => {
+            initialPageElement.scrollIntoView({ inline: 'center' });
+        });
+        resizeObserver.observe(initialPageElement);
+
+        return () => resizeObserver.disconnect();
     }, [initialPage]);
 
     useEffect(() => {

src/components/reader/pager/VerticalPager.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
 import { Box } from '@mui/material';
 import { IReaderProps } from '@/typings';
 import { Page } from '@/components/reader/Page';
@@ -165,12 +165,18 @@ export function VerticalPager(props: IReaderProps) {
         };
     }, [go]);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
-        // Delay scrolling to next cycle
+        const initialPageElement = pagesRef.current[initialPage];
-        setTimeout(() => {
+        if (!initialPageElement) {
-            // scroll last read page into view when initialPage changes
+            return () => {};
-            pagesRef.current[initialPage]?.scrollIntoView();
+        }
-        }, 0);
+
+        const resizeObserver = new ResizeObserver(() => {
+            initialPageElement.scrollIntoView();
+        });
+        resizeObserver.observe(initialPageElement);
+
+        return () => resizeObserver.disconnect();
     }, [initialPage]);
 
     return (