Fix infinite scroll loading previous chapter unintentionally on reader open

This was only was noticeable in case the transition page was disabled.
Due to potential layout shifts and scrolling the initial page into view, the infinite chapter logic got triggered and loaded the previous chapter.
This is not a 100% guarantee that it won't happen, slow devices might still run into this issue

src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { ReadingDirection, ReadingMode } from '@/features/reader/Reader.types.ts';
 import {
     isContinuousReadingMode,
@@ -17,6 +17,9 @@ import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts
 import { useIntersectionObserver } from '@/base/hooks/useIntersectionObserver.tsx';
 import { getReaderScrollbarStore, useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts';
 import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
+import { d } from 'koration';
+import { maybeExecuteWithDelay } from '@/lib/HelperFunctions.ts';
+import { usePrevious } from '@mantine/hooks';
 
 interface ElementIntersection {
     start: boolean;
@@ -245,6 +248,10 @@ export const useReaderInfiniteScrollUpdateChapter = (
     image: HTMLElement | null,
     scrollElement: HTMLElement | null,
 ) => {
+    const previousChapterId = usePrevious(chapterId);
+    const initialChapterIdRef = useRef(chapterId);
+    const eventListenerTimeoutRef = useRef<NodeJS.Timeout>(undefined);
+
     const { readingMode, readingDirection, shouldUseInfiniteScroll, shouldShowTransitionPage } = useReaderSettingsStore(
         (state) => ({
             readingMode: state.readingMode.value,
@@ -259,6 +266,7 @@ export const useReaderInfiniteScrollUpdateChapter = (
         const isContinuousVerticalReadingModeActive = isContinuousVerticalReadingMode(readingMode);
 
         if (
+            !image ||
             shouldShowTransitionPage ||
             !scrollElement ||
             !isContinuousReadingModeActive ||
@@ -297,7 +305,15 @@ export const useReaderInfiniteScrollUpdateChapter = (
             }
         };
 
-        scrollElement.addEventListener('scroll', onScroll, { passive: true });
+        const isInitialChapterRender =
+            previousChapterId === undefined ||
+            (initialChapterIdRef.current === chapterId && previousChapterId === chapterId);
+        clearTimeout(eventListenerTimeoutRef.current);
+        eventListenerTimeoutRef.current = maybeExecuteWithDelay(
+            () => scrollElement.addEventListener('scroll', onScroll, { passive: true }),
+            d(5).seconds.inWholeMilliseconds,
+            isInitialChapterRender,
+        );
         return () => scrollElement.removeEventListener('scroll', onScroll);
     }, [
         readingMode,
@@ -307,6 +323,7 @@ export const useReaderInfiniteScrollUpdateChapter = (
         isCurrentChapter,
         isChapterToOpenVisible,
         chapterToOpenId,
+        !!image,
     ]);
 
     useIntersectionObserver(