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;