Improve memoization of "MobileReaderProgressBar"

src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx

@@ -49,7 +49,7 @@ const BaseReaderBottomBarMobile = ({
 
     return (
         <>
-            <Slide direction="up" in={isVisible} mountOnEnter unmountOnExit>
+            <Slide direction="up" in={isVisible}>
                 <Stack
                     sx={{
                         position: 'fixed',

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

@@ -8,17 +8,13 @@
 
 import Box from '@mui/material/Box';
 import Tooltip from '@mui/material/Tooltip';
-import { ReactNode } from 'react';
+import { memo, ReactNode } from 'react';
 import { ReaderProgressBarSlotProps } from '@/modules/reader/types/ReaderProgressBar.types.ts';
 
 import { READER_PROGRESS_BAR_POSITION_TO_PLACEMENT } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
 
-export const ReaderProgressBarSlot = ({
+export const ReaderProgressBarSlot = memo(
-    pageName,
+    ({ pageName, progressBarPosition, slotProps, children }: ReaderProgressBarSlotProps & { children?: ReactNode }) => (
-    progressBarPosition,
-    slotProps,
-    children,
-}: ReaderProgressBarSlotProps & { children?: ReactNode }) => (
         <Tooltip
             {...slotProps?.tooltip}
             key={pageName}
@@ -29,4 +25,5 @@ export const ReaderProgressBarSlot = ({
                 {children}
             </Box>
         </Tooltip>
+    ),
 );

src/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx

@@ -7,32 +7,20 @@
  */
 
 import Box from '@mui/material/Box';
+import { ComponentProps, memo } from 'react';
 import { ProgressBarPosition } from '@/modules/reader/types/Reader.types.ts';
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
 import { ReaderProgressBarSlot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlot';
 
-export const ReaderProgressBarSlotMobile = ({
+const SLOT_SX_PROP: NonNullable<NonNullable<ComponentProps<typeof ReaderProgressBarSlot>['slotProps']>['box']>['sx'] = {
-    pageName,
-    isTrailingPage,
-}: {
-    pageName: string;
-    isTrailingPage: boolean;
-}) => (
-    <ReaderProgressBarSlot
-        pageName={pageName}
-        progressBarPosition={ProgressBarPosition.BOTTOM}
-        slotProps={{
-            box: {
-                sx: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'end',
     position: 'relative',
     backgroundColor: 'background.default',
-                },
+};
-            },
+
-        }}
+const ProgressBarPagePoint = memo(({ isTrailingPage }: { isTrailingPage: boolean }) => (
-    >
     <Box
         sx={{
             position: 'absolute',
@@ -49,5 +37,16 @@ export const ReaderProgressBarSlotMobile = ({
             zIndex: 1,
         }}
     />
+));
+
+export const ReaderProgressBarSlotMobile = memo(
+    ({ pageName, isTrailingPage }: { pageName: string; isTrailingPage: boolean }) => (
+        <ReaderProgressBarSlot
+            pageName={pageName}
+            progressBarPosition={ProgressBarPosition.BOTTOM}
+            slotProps={{ box: { sx: SLOT_SX_PROP } }}
+        >
+            <ProgressBarPagePoint isTrailingPage={isTrailingPage} />
         </ReaderProgressBarSlot>
+    ),
 );

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

@@ -28,61 +28,7 @@ import { TReaderOverlayContext } from '@/modules/reader/types/ReaderOverlay.type
 import { TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts';
 import { ReaderProgressBarSlotMobile } from '@/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx';
 
-const BaseMobileReaderProgressBar = ({
+const PROGRESS_BAR_SLOT_PROPS: ComponentProps<typeof ReaderProgressBar>['slotProps'] = {
-    previousChapter,
-    nextChapter,
-    isVisible,
-    setIsMaximized,
-}: Pick<ReaderStateChapters, 'previousChapter' | 'nextChapter'> &
-    Pick<TReaderOverlayContext, 'isVisible'> &
-    Pick<TReaderProgressBarContext, 'setIsMaximized'>) => {
-    const pagesState = userReaderStatePagesContext();
-    const { currentPageIndex, pages } = pagesState;
-
-    const direction = ReaderService.useGetThemeDirection();
-
-    const openNextChapter = ReaderService.useNavigateToChapter(nextChapter, ReaderResumeMode.START);
-    const openPreviousChapter = ReaderService.useNavigateToChapter(previousChapter, ReaderResumeMode.END);
-
-    const createProgressBarSlot: ComponentProps<typeof ReaderProgressBar>['createProgressBarSlot'] = useCallback(
-        (page, _1, _2, _3, _4, _5, isTrailingPage) => (
-            <ReaderProgressBarSlotMobile pageName={page.name} isTrailingPage={isTrailingPage} />
-        ),
-        [],
-    );
-
-    useLayoutEffect(() => {
-        setIsMaximized(isVisible);
-
-        return () => setIsMaximized(false);
-    }, [isVisible]);
-
-    if (!isVisible) {
-        return null;
-    }
-
-    return (
-        <ReaderProgressBarDirectionWrapper>
-            <Stack
-                sx={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    px: 2,
-                    gap: 1,
-                }}
-            >
-                <IconButton
-                    onClick={openPreviousChapter}
-                    disabled={!previousChapter}
-                    sx={{ backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85), boxShadow: 2 }}
-                >
-                    {getOptionForDirection(<SkipPreviousIcon />, <SkipNextIcon />, direction)}
-                </IconButton>
-                <ReaderProgressBar
-                    progressBarPosition={ProgressBarPosition.BOTTOM}
-                    {...pagesState}
-                    createProgressBarSlot={createProgressBarSlot}
-                    slotProps={{
     container: {
         sx: {
             flexGrow: 1,
@@ -110,26 +56,16 @@ const BaseMobileReaderProgressBar = ({
             cursor: 'pointer',
         },
     },
-
     progressBarSlotsContainer: {
         sx: {
             borderRadius: 100,
         },
     },
-
     progressBarSlot: {
         sx: {
             height: '20px',
         },
     },
-                        progressBarReadPages: {
-                            sx: {
-                                height: '20px',
-                                backgroundColor: 'primary.main',
-                                borderRadius: '400px 0 0 400px',
-                                width: `calc(${(Math.max(0, getPage(currentPageIndex, pages).pagesIndex) / pages.length) * 100}% + 100% / ${pages.length})`,
-                            },
-                        },
     progressBarCurrentPageSlot: {
         sx: {
             display: 'flex',
@@ -142,8 +78,9 @@ const BaseMobileReaderProgressBar = ({
     progressBarPageTexts: {
         base: { px: 1 },
     },
-                    }}
+};
-                    slots={{
+
+const PROGRESS_BAR_SLOTS: ComponentProps<typeof ReaderProgressBar>['slots'] = {
     progressBarCurrentPage: (
         <Box
             sx={{
@@ -154,7 +91,68 @@ const BaseMobileReaderProgressBar = ({
             }}
         />
     ),
+};
+
+const BaseMobileReaderProgressBar = ({
+    previousChapter,
+    nextChapter,
+    isVisible,
+    setIsMaximized,
+}: Pick<ReaderStateChapters, 'previousChapter' | 'nextChapter'> &
+    Pick<TReaderOverlayContext, 'isVisible'> &
+    Pick<TReaderProgressBarContext, 'setIsMaximized'>) => {
+    const pagesState = userReaderStatePagesContext();
+    const { currentPageIndex, pages } = pagesState;
+
+    const direction = ReaderService.useGetThemeDirection();
+
+    const openNextChapter = ReaderService.useNavigateToChapter(nextChapter, ReaderResumeMode.START);
+    const openPreviousChapter = ReaderService.useNavigateToChapter(previousChapter, ReaderResumeMode.END);
+
+    useLayoutEffect(() => {
+        setIsMaximized(isVisible);
+
+        return () => setIsMaximized(false);
+    }, [isVisible]);
+
+    return (
+        <ReaderProgressBarDirectionWrapper>
+            <Stack
+                sx={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    px: 2,
+                    gap: 1,
                 }}
+            >
+                <IconButton
+                    onClick={openPreviousChapter}
+                    disabled={!previousChapter}
+                    sx={{ backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85), boxShadow: 2 }}
+                >
+                    {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} />
+                        ),
+                        [],
+                    )}
+                    slotProps={{
+                        ...PROGRESS_BAR_SLOT_PROPS,
+                        progressBarReadPages: {
+                            sx: {
+                                height: '20px',
+                                backgroundColor: 'primary.main',
+                                borderRadius: '400px 0 0 400px',
+                                width: `calc(${(Math.max(0, getPage(currentPageIndex, pages).pagesIndex) / pages.length) * 100}% + 100% / ${pages.length})`,
+                            },
+                        },
+                    }}
+                    slots={PROGRESS_BAR_SLOTS}
                 />
                 <IconButton
                     onClick={openNextChapter}