Pass progress bar props per HOC

Some unused "reader page state" values which were passed as props caused unnecessary re-renders

src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx

@@ -32,6 +32,7 @@ import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts';
 import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx';
 import { ReaderProgressBarSlotWrapper } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlotWrapper.tsx';
+import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
 
 const BaseReaderProgressBar = ({
     totalPages,
@@ -225,6 +226,18 @@ export const ReaderProgressBar = withPropsFrom(
         () => ({
             direction: ReaderService.useGetThemeDirection(),
         }),
+        userReaderStatePagesContext,
+        ReaderService.useSettingsWithoutDefaultFlag,
+    ],
+    [
+        'isDragging',
+        'setIsDragging',
+        'openPage',
+        'direction',
+        'pages',
+        'pageLoadStates',
+        'totalPages',
+        'currentPageIndex',
+        'progressBarPosition',
     ],
-    ['isDragging', 'setIsDragging', 'openPage', 'direction'],
 );

src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx

@@ -14,19 +14,19 @@ import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { ComponentProps, memo, useCallback, useLayoutEffect } from 'react';
 import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx';
-import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
 import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
 import { getOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
-import { ProgressBarPosition, ReaderResumeMode, ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
+import { ReaderResumeMode, ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
 import { ReaderProgressBarDirectionWrapper } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx';
 import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx';
 import { useReaderOverlayContext } from '@/modules/reader/contexts/ReaderOverlayContext.tsx';
 import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 import { TReaderOverlayContext } from '@/modules/reader/types/ReaderOverlay.types.ts';
-import { TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts';
+import { ReaderProgressBarProps, TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts';
 import { ReaderProgressBarSlotMobile } from '@/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx';
+import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
 
 const PROGRESS_BAR_SLOT_PROPS: ComponentProps<typeof ReaderProgressBar>['slotProps'] = {
     container: {
@@ -98,14 +98,15 @@ const BaseMobileReaderProgressBar = ({
     nextChapter,
     isVisible,
     setIsMaximized,
+    currentPageIndex,
+    pages,
+    direction,
 }: Pick<ReaderStateChapters, 'previousChapter' | 'nextChapter'> &
     Pick<TReaderOverlayContext, 'isVisible'> &
-    Pick<TReaderProgressBarContext, 'setIsMaximized'>) => {
+    Pick<TReaderProgressBarContext, 'setIsMaximized'> &
-    const pagesState = userReaderStatePagesContext();
+    Pick<ReaderProgressBarProps, 'currentPageIndex' | 'pages'> & {
-    const { currentPageIndex, pages } = pagesState;
+        direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
-
+    }) => {
-    const direction = ReaderService.useGetThemeDirection();
-
     const openNextChapter = ReaderService.useNavigateToChapter(nextChapter, ReaderResumeMode.START);
     const openPreviousChapter = ReaderService.useNavigateToChapter(previousChapter, ReaderResumeMode.END);
 
@@ -133,8 +134,6 @@ const BaseMobileReaderProgressBar = ({
                     {getOptionForDirection(<SkipPreviousIcon />, <SkipNextIcon />, direction)}
                 </IconButton>
                 <ReaderProgressBar
-                    progressBarPosition={ProgressBarPosition.BOTTOM}
-                    {...pagesState}
                     createProgressBarSlot={useCallback(
                         (page, _1, _2, _3, _4, _5, isTrailingPage) => (
                             <ReaderProgressBarSlotMobile pageName={page.name} isTrailingPage={isTrailingPage} />
@@ -168,6 +167,12 @@ const BaseMobileReaderProgressBar = ({
 
 export const MobileReaderProgressBar = withPropsFrom(
     memo(BaseMobileReaderProgressBar),
-    [useReaderStateChaptersContext, useReaderOverlayContext, useReaderProgressBarContext],
+    [
-    ['previousChapter', 'nextChapter', 'isVisible', 'setIsMaximized'],
+        useReaderStateChaptersContext,
+        useReaderOverlayContext,
+        useReaderProgressBarContext,
+        userReaderStatePagesContext,
+        () => ({ direction: ReaderService.useGetThemeDirection() }),
+    ],
+    ['previousChapter', 'nextChapter', 'isVisible', 'setIsMaximized', 'currentPageIndex', 'pages', 'direction'],
 );

src/modules/reader/components/overlay/progress-bar/variants/StandardReaderProgressBar.tsx

@@ -15,7 +15,7 @@ import { IReaderSettings, ProgressBarType, TReaderScrollbarContext } from '@/mod
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
 import { getProgressBarPositionInfo } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
 import { ReaderProgressBarDirectionWrapper } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx';
-import { TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts';
+import { ReaderProgressBarProps, TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts';
 import { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types.ts';
 import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
@@ -34,15 +34,15 @@ const BaseStandardReaderProgressBar = ({
     readerDirection,
     scrollbarXSize,
     scrollbarYSize,
+    totalPages,
 }: Pick<NavbarContextType, 'readerNavBarWidth'> &
     Pick<TReaderProgressBarContext, 'isMaximized' | 'setIsMaximized' | 'isDragging'> &
     Pick<IReaderSettings, 'progressBarType' | 'progressBarSize' | 'progressBarPosition'> &
-    Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'> & {
+    Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'> &
+    Pick<ReaderProgressBarProps, 'totalPages'> & {
         readerDirection: ReturnType<typeof ReaderService.useGetThemeDirection>;
     }) => {
     const theme = useTheme();
-    const pagesState = userReaderStatePagesContext();
-    const { totalPages } = pagesState;
 
     const { isBottom, isLeft, isRight, isVertical, isHorizontal } = getProgressBarPositionInfo(progressBarPosition);
 
@@ -55,8 +55,6 @@ const BaseStandardReaderProgressBar = ({
     return (
         <ReaderProgressBarDirectionWrapper>
             <ReaderProgressBar
-                {...pagesState}
-                progressBarPosition={progressBarPosition}
                 createProgressBarSlot={useCallback(
                     (
                         page,
@@ -236,6 +234,7 @@ export const StandardReaderProgressBar = withPropsFrom(
         ReaderService.useSettingsWithoutDefaultFlag,
         () => ({ readerDirection: ReaderService.useGetThemeDirection() }),
         useReaderScrollbarContext,
+        userReaderStatePagesContext,
     ],
     [
         'readerNavBarWidth',
@@ -248,5 +247,6 @@ export const StandardReaderProgressBar = withPropsFrom(
         'readerDirection',
         'scrollbarXSize',
         'scrollbarYSize',
+        'totalPages',
     ],
 );

src/modules/reader/types/ReaderProgressBar.types.ts

@@ -42,7 +42,7 @@ export interface ReaderStatePages {
 }
 
 export interface ReaderProgressBarProps
-    extends Omit<ReaderStatePages, 'setTotalPages' | 'setPages' | 'setPageLoadStates'>,
+    extends Pick<ReaderStatePages, 'totalPages' | 'pages' | 'pageLoadStates' | 'currentPageIndex'>,
         Pick<IReaderSettings, 'progressBarPosition'> {}
 
 export interface TReaderProgressCurrentPage extends PageData {