Improve progress bar rendering while dragging

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

@@ -190,6 +190,7 @@ const BaseReaderProgressBar = ({
                                         page.secondary ? pageLoadStates[page.secondary.index].loaded : undefined
                                     }
                                     createProgressBarSlot={createProgressBarSlot}
+                                    showDraggingStyle={pagesIndex === currentPagesIndex && isDragging}
                                 />
                             ))}
                             <ProgressBarHighlightReadPages

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

@@ -36,6 +36,7 @@ export const ReaderProgressBarSlotWrapper = memo(
         isLeadingPage,
         isTrailingPage,
         totalPages,
+        showDraggingStyle,
         primaryPageLoadState,
         secondaryPageLoadState,
         createProgressBarSlot,
@@ -47,6 +48,7 @@ export const ReaderProgressBarSlotWrapper = memo(
         isLeadingPage: boolean;
         isTrailingPage: boolean;
         totalPages: number;
+        showDraggingStyle: boolean;
         primaryPageLoadState: ReaderProgressBarProps['pageLoadStates'][number]['loaded'];
         secondaryPageLoadState: ReaderProgressBarProps['pageLoadStates'][number]['loaded'] | undefined;
         createProgressBarSlot: (
@@ -58,6 +60,7 @@ export const ReaderProgressBarSlotWrapper = memo(
             isLeadingPage: boolean,
             isTrailingPage: boolean,
             totalPages: number,
+            handleDragging: boolean,
         ) => ReactNode;
     } & BoxProps) => {
         const slot = useMemo(
@@ -71,6 +74,7 @@ export const ReaderProgressBarSlotWrapper = memo(
                     isLeadingPage,
                     isTrailingPage,
                     totalPages,
+                    showDraggingStyle,
                 ),
             [
                 createProgressBarSlot,
@@ -82,6 +86,7 @@ export const ReaderProgressBarSlotWrapper = memo(
                 isLeadingPage,
                 isTrailingPage,
                 totalPages,
+                showDraggingStyle,
             ],
         );
 

src/modules/reader/components/overlay/progress-bar/desktop/ReaderProgressBarSlotDesktop.tsx

@@ -25,7 +25,7 @@ export const ReaderProgressBarSlotDesktop = memo(
         isFirstPage,
         isLastPage,
         isLeadingPage,
-        isDragging,
+        showDraggingStyle,
     }: Pick<IReaderSettings, 'progressBarPosition'> & {
         pageName: string;
         pageUrl: string;
@@ -35,7 +35,7 @@ export const ReaderProgressBarSlotDesktop = memo(
         isFirstPage: boolean;
         isLastPage: boolean;
         isLeadingPage: boolean;
-        isDragging: boolean;
+        showDraggingStyle: boolean;
     }) => {
         const theme = useTheme();
 
@@ -99,7 +99,7 @@ export const ReaderProgressBarSlotDesktop = memo(
                             backgroundColor: alpha(theme.palette.primary.main, 0.5),
                         }),
                         ...applyStyles(isCurrentPage, {
-                            cursor: isDragging ? 'grabbing' : 'grab',
+                            cursor: showDraggingStyle ? 'grabbing' : 'grab',
                             pointer: 'grabbing',
                             borderRadius: 2,
                             backgroundColor: 'primary.dark',

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

@@ -65,6 +65,7 @@ const BaseStandardReaderProgressBar = ({
                         isLeadingPage,
                         _,
                         totalPages_,
+                        showDraggingStyle,
                     ) => (
                         <ReaderProgressBarSlotDesktop
                             pageName={page.name}
@@ -76,10 +77,10 @@ const BaseStandardReaderProgressBar = ({
                             isFirstPage={pagesIndex === 0}
                             isLastPage={pagesIndex === totalPages_ - 1}
                             isLeadingPage={isLeadingPage}
-                            isDragging={isDragging}
+                            showDraggingStyle={showDraggingStyle}
                         />
                     ),
-                    [progressBarPosition, isDragging],
+                    [progressBarPosition],
                 )}
                 slotProps={{
                     container: {