Fix page resume in continuous pagers

The image refs weren't always set by the time the last read page got resumed.
Thus, the last read page never got scrolled into view

src/modules/reader/utils/Reader.utils.ts

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { MutableRefObject, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { MutableRefObject, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Direction } from '@mui/material/styles';
 import {
     ReaderPageSpreadState,
@@ -33,6 +33,7 @@ import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types
 import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts';
 import { coerceIn } from '@/lib/HelperFunctions.ts';
 import { TReaderTapZoneContext } from '@/modules/reader/types/TapZoneLayout.types.ts';
+import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
 
 export const getInitialReaderPageIndex = (
     resumeMode: ReaderResumeMode,
@@ -231,29 +232,33 @@ export const useReaderHandlePageSelection = (
     readingDirection: ReadingDirection,
     scrollElementRef: MutableRefObject<HTMLDivElement | null>,
 ) => {
-    useLayoutEffect(() => {
+    const pageToScrollTo = useMemo(() => getPage(pageToScrollToIndex ?? 0, pages), [pageToScrollToIndex, pages]);
+
+    const imageRef = imageRefs.current[pageToScrollTo.pagesIndex];
+    const ref = isContinuousReadingModeActive ? imageRef : scrollElementRef;
+
+    useResizeObserver(
+        ref,
+        useCallback(
+            (entries, observer) => {
                 if (pageToScrollToIndex == null) {
                     return;
                 }
 
-        const pageToScrollTo = getPage(pageToScrollToIndex, pages);
+                const element = entries[0].target as HTMLElement;
 
                 if (isContinuousReadingModeActive) {
                     const directionOffset =
                         pageToScrollToIndex > currentPageIndex ? DirectionOffset.PREVIOUS : DirectionOffset.NEXT;
-            const imageRef = imageRefs.current[pageToScrollTo.pagesIndex];
 
-            imageRef?.scrollIntoView({
+                    element.scrollIntoView({
                         block: 'start',
                         inline: getScrollIntoViewInlineOption(directionOffset, themeDirection, readingDirection),
                     });
                 }
 
                 if (!isContinuousReadingModeActive) {
-            scrollElementRef.current?.scrollTo(
+                    element.scrollTo(getScrollToXForReadingDirection(element, themeDirection, readingDirection), 0);
-                getScrollToXForReadingDirection(scrollElementRef.current, themeDirection, readingDirection),
-                0,
-            );
                 }
 
                 const newPageIndex = getNextIndexFromPage(pageToScrollTo);
@@ -261,7 +266,12 @@ export const useReaderHandlePageSelection = (
 
                 setPageToScrollToIndex(null);
                 updateCurrentPageIndex(newPageIndex, !isLastPage);
-    }, [pageToScrollToIndex]);
+
+                observer.disconnect();
+            },
+            [pageToScrollToIndex],
+        ),
+    );
 };
 
 export const useReaderHideCursorOnInactivity = (scrollElementRef: MutableRefObject<HTMLDivElement | null>) => {