Remove context usage from ReaderPage

In case many chapters are rendered, even just the HOC wrapper component re-render due to the context change increases the render time.

Thus, getting rid of these HOC wrapper re-renders by moving the context usage up to the ReaderViewer decreases the render time.

src/modules/reader/components/viewer/pager/BasePager.tsx

@@ -26,6 +26,13 @@ const BaseBasePager = ({
     isCurrentChapter,
     isPreviousChapter,
     isNextChapter,
+    customFilter,
+    pageScaleMode,
+    shouldStretchPage,
+    readerWidth,
+    scrollbarXSize,
+    scrollbarYSize,
+    readerNavBarWidth,
 }: Omit<ReaderPagerProps, 'pageLoadStates' | 'retryFailedPagesKeyPrefix'> &
     Pick<IReaderSettings, 'readingMode' | 'imagePreLoadAmount'> & {
         createPage: (
@@ -34,6 +41,14 @@ const BaseBasePager = ({
             shouldLoad: boolean,
             shouldDisplay: boolean,
             setRef: (pagesIndex: number, element: HTMLElement | null) => void,
+            readingMode: ReaderPagerProps['readingMode'],
+            customFilter: ReaderPagerProps['customFilter'],
+            pageScaleMode: ReaderPagerProps['pageScaleMode'],
+            shouldStretchPage: ReaderPagerProps['shouldStretchPage'],
+            readerWidth: ReaderPagerProps['readerWidth'],
+            scrollbarXSize: ReaderPagerProps['scrollbarXSize'],
+            scrollbarYSize: ReaderPagerProps['scrollbarYSize'],
+            readerNavBarWidth: ReaderPagerProps['readerNavBarWidth'],
         ) => ReactNode;
         slots?: { boxProps?: BoxProps };
     }) => {
@@ -93,6 +108,14 @@ const BaseBasePager = ({
                     pagesIndexesToRender.includes(pagesIndex),
                     [ReaderTransitionPageMode.NONE, ReaderTransitionPageMode.BOTH].includes(transitionPageMode),
                     setRef,
+                    readingMode,
+                    customFilter,
+                    pageScaleMode,
+                    shouldStretchPage,
+                    readerWidth,
+                    scrollbarXSize,
+                    scrollbarYSize,
+                    readerNavBarWidth,
                 ),
             )}
         </Box>

src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx

@@ -58,7 +58,7 @@ const BaseReaderDoublePagedPager = ({
     return (
         <BasePager
             {...props}
-            createPage={(page, pagesIndex, shouldLoad, shouldDisplay) => {
+            createPage={(page, pagesIndex, shouldLoad, shouldDisplay, _setRef, ...baseProps) => {
                 const { primary, secondary } = page;
 
                 const currentSecondaryPageIndex = getNextIndexFromPage(currentPage);
@@ -80,6 +80,7 @@ const BaseReaderDoublePagedPager = ({
                             shouldDisplay && isPrimaryPage && shouldLoad,
                             currentPage.primary.index,
                             totalPages,
+                            ...baseProps,
                             pageLoadStates[primary.index].error ? retryFailedPagesKeyPrefix : undefined,
                             hasSecondaryPage ? getPagePosition('first', themeDirection, readingDirection) : undefined,
                             hasSecondaryPage,
@@ -96,6 +97,7 @@ const BaseReaderDoublePagedPager = ({
                                 shouldDisplay && isSecondaryPage && shouldLoad,
                                 currentSecondaryPageIndex,
                                 totalPages,
+                                ...baseProps,
                                 pageLoadStates[secondary.index].error ? retryFailedPagesKeyPrefix : undefined,
                                 getPagePosition('second', themeDirection, readingDirection),
                                 true,

src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx

@@ -29,7 +29,7 @@ const BaseReaderHorizontalPager = ({
     return (
         <BasePager
             {...props}
-            createPage={(page, pagesIndex, shouldLoad, _, setRef) =>
+            createPage={(page, pagesIndex, shouldLoad, _, setRef, ...baseProps) =>
                 createReaderPage(
                     page,
                     pagesIndex,
@@ -41,6 +41,7 @@ const BaseReaderHorizontalPager = ({
                     true,
                     currentPageIndex,
                     totalPages,
+                    ...baseProps,
                     pageLoadStates[page.primary.index].error ? retryFailedPagesKeyPrefix : undefined,
                     undefined,
                     undefined,

src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx

@@ -23,7 +23,7 @@ const BaseReaderPagedPager = ({
     return (
         <BasePager
             {...props}
-            createPage={(page, pagesIndex, shouldLoad, shouldDisplay) =>
+            createPage={(page, pagesIndex, shouldLoad, shouldDisplay, _setRef, ...baseProps) =>
                 createReaderPage(
                     page,
                     pagesIndex,
@@ -35,6 +35,7 @@ const BaseReaderPagedPager = ({
                     shouldDisplay && shouldLoad && currentPageIndex === page.primary.index,
                     currentPageIndex,
                     totalPages,
+                    ...baseProps,
                     pageLoadStates[page.primary.index].error ? retryFailedPagesKeyPrefix : undefined,
                 )
             }

src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx

@@ -26,7 +26,7 @@ const BaseReaderVerticalPager = ({
     return (
         <BasePager
             {...props}
-            createPage={(page, pagesIndex, shouldLoad, _, setRef) =>
+            createPage={(page, pagesIndex, shouldLoad, _, setRef, ...baseProps) =>
                 createReaderPage(
                     page,
                     pagesIndex,
@@ -38,6 +38,7 @@ const BaseReaderVerticalPager = ({
                     true,
                     currentPageIndex,
                     totalPages,
+                    ...baseProps,
                     pageLoadStates[page.primary.index].error ? retryFailedPagesKeyPrefix : undefined,
                     undefined,
                     undefined,