From f808614e6c237645a6d1f821fb4cfbe99449c42f Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Tue, 31 Dec 2024 02:42:17 +0100
Subject: [PATCH] Prevent layout shifts in continuous pagers

I was unable to find a fix for this problem, thus, the only solution I see is disabling this functionality for the continuous readers.

Due to preloading leading pages, the layout got shifted once the pages got loaded.
This messed with the scroll position which caused the top of the scrolled into views pages to not be at the top of the viewport anymore.
---
 .../reader/components/viewer/pager/BasePager.tsx      | 11 +++++++++--
 src/modules/reader/utils/ReaderPager.utils.tsx        |  5 ++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/modules/reader/components/viewer/pager/BasePager.tsx b/src/modules/reader/components/viewer/pager/BasePager.tsx
index 7abed1a4..e104d174 100644
--- a/src/modules/reader/components/viewer/pager/BasePager.tsx
+++ b/src/modules/reader/components/viewer/pager/BasePager.tsx
@@ -43,8 +43,15 @@ const BaseBasePager = ({
     }) => {
     const previousCurrentPageIndex = useRef(-1);
     const pagesIndexesToRender = useMemo(
-        () => getPageIndexesToLoad(currentPageIndex, pages, previousCurrentPageIndex.current, imagePreLoadAmount),
-        [currentPageIndex, pages, imagePreLoadAmount],
+        () =>
+            getPageIndexesToLoad(
+                currentPageIndex,
+                pages,
+                previousCurrentPageIndex.current,
+                imagePreLoadAmount,
+                readingMode,
+            ),
+        [currentPageIndex, pages, imagePreLoadAmount, readingMode],
     );
     useEffect(() => {
         previousCurrentPageIndex.current = currentPageIndex;
diff --git a/src/modules/reader/utils/ReaderPager.utils.tsx b/src/modules/reader/utils/ReaderPager.utils.tsx
index fb3c2b43..4a8d94a1 100644
--- a/src/modules/reader/utils/ReaderPager.utils.tsx
+++ b/src/modules/reader/utils/ReaderPager.utils.tsx
@@ -462,16 +462,19 @@ export const getPageIndexesToLoad = (
     pages: ReaderStatePages['pages'],
     previousCurrentPageIndex: number,
     imagePreLoadAmount: number,
+    readingMode: ReadingMode,
 ): number[] => {
     const currentPagesIndex = getPage(currentPageIndex, pages).pagesIndex;
 
     const directionInvert = previousCurrentPageIndex <= currentPageIndex ? 1 : -1;
     // load at most PREVIOUS_IMAGE_LOAD_AMOUNT of the previous pages to ensure that you do not have to wait too long
     // when going back to the previous pages
-    const startPagesIndex = Math.max(
+    const startPagesIndexTrailingIncluded = Math.max(
         0,
         currentPagesIndex - Math.min(PREVIOUS_IMAGE_LOAD_AMOUNT, imagePreLoadAmount) * directionInvert,
     );
+    // do not load previous pages for continuous pagers to prevent layout shifts due to leading pages getting loaded
+    const startPagesIndex = !isContinuousReadingMode(readingMode) ? startPagesIndexTrailingIncluded : currentPageIndex;
     const endPagesIndex = currentPagesIndex + imagePreLoadAmount * directionInvert;
     const pagesToRenderLength = Math.abs(endPagesIndex - startPagesIndex) + 1;