From afc3a23ae08d920b57e6420d93b02e7a38a99e28 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Fri, 10 Jan 2025 02:03:31 +0100
Subject: [PATCH] Always scroll to start of page on page change

By the time the scroll area got scrolled to the start of the visible pages, the previous/next page wasn't yet shown and thus, the scrollable area wasn't updated yet.
Thus, in case the scrollable area grew in width due to the page change, the start never got scrolled into view due to triggering the logic too early.
---
 .../reader/components/viewer/ReaderViewer.tsx |  7 ++++++
 src/modules/reader/utils/Reader.utils.ts      | 25 +++++++++++++------
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/modules/reader/components/viewer/ReaderViewer.tsx b/src/modules/reader/components/viewer/ReaderViewer.tsx
index 7edf4ebc..531603b8 100644
--- a/src/modules/reader/components/viewer/ReaderViewer.tsx
+++ b/src/modules/reader/components/viewer/ReaderViewer.tsx
@@ -54,6 +54,7 @@ import {
     useReaderHideCursorOnInactivity,
     useReaderHideOverlayOnUserScroll,
     useReaderHorizontalModeInvertXYScrolling,
+    useReaderScrollToStartOnPageChange,
 } from '@/modules/reader/utils/Reader.utils.ts';
 import { TReaderTapZoneContext } from '@/modules/reader/types/TapZoneLayout.types.ts';
 import { useReaderTapZoneContext } from '@/modules/reader/contexts/ReaderTapZoneContext.tsx';
@@ -223,6 +224,12 @@ const BaseReaderViewer = forwardRef(
             imageRefs,
             themeDirection,
             readingDirection,
+        );
+        useReaderScrollToStartOnPageChange(
+            currentPageIndex,
+            isContinuousReadingModeActive,
+            themeDirection,
+            readingDirection,
             scrollElementRef,
         );
         useReaderHideCursorOnInactivity(scrollElementRef);
diff --git a/src/modules/reader/utils/Reader.utils.ts b/src/modules/reader/utils/Reader.utils.ts
index 7ad7f012..7ec12721 100644
--- a/src/modules/reader/utils/Reader.utils.ts
+++ b/src/modules/reader/utils/Reader.utils.ts
@@ -229,7 +229,6 @@ export const useReaderHandlePageSelection = (
     imageRefs: MutableRefObject<(HTMLElement | null)[]>,
     themeDirection: Direction,
     readingDirection: ReadingDirection,
-    scrollElementRef: MutableRefObject<HTMLDivElement | null>,
 ) => {
     useLayoutEffect(() => {
         if (pageToScrollToIndex == null) {
@@ -249,13 +248,6 @@ export const useReaderHandlePageSelection = (
             });
         }
 
-        if (!isContinuousReadingModeActive) {
-            scrollElementRef.current?.scrollTo(
-                getScrollToXForReadingDirection(scrollElementRef.current, themeDirection, readingDirection),
-                0,
-            );
-        }
-
         const newPageIndex = getNextIndexFromPage(pageToScrollTo);
         const isLastPage = newPageIndex === totalPages - 1;
 
@@ -264,6 +256,23 @@ export const useReaderHandlePageSelection = (
     }, [pageToScrollToIndex]);
 };
 
+export const useReaderScrollToStartOnPageChange = (
+    currentPageIndex: ReaderStatePages['currentPageIndex'],
+    isContinuousReadingModeActive: boolean,
+    themeDirection: Direction,
+    readingDirection: ReadingDirection,
+    scrollElementRef: MutableRefObject<HTMLDivElement | null>,
+): void => {
+    useLayoutEffect(() => {
+        if (!isContinuousReadingModeActive) {
+            scrollElementRef.current?.scrollTo(
+                getScrollToXForReadingDirection(scrollElementRef.current, themeDirection, readingDirection),
+                0,
+            );
+        }
+    }, [currentPageIndex]);
+};
+
 export const useReaderHideCursorOnInactivity = (scrollElementRef: MutableRefObject<HTMLDivElement | null>) => {
     const mouseInactiveTimeout = useRef<NodeJS.Timeout>();