From 52f5415c9fb7a81eabaf3239f1df0d433ae7cbf8 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Thu, 2 Jan 2025 21:57:01 +0100 Subject: [PATCH] Memoize mobile progress bar position related styling Only really relevant for the "progress bar slot" prop to prevent the slots from unnecessary re-rendering, since depending on the total pages, this can impact the render performance on page changes heavily --- .../variants/MobileReaderProgressBar.tsx | 183 +++++++++--------- 1 file changed, 95 insertions(+), 88 deletions(-) diff --git a/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx b/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx index 149c2b06..354df094 100644 --- a/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx +++ b/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx @@ -12,7 +12,7 @@ import SkipNextIcon from '@mui/icons-material/SkipNext'; import Stack from '@mui/material/Stack'; import { alpha } from '@mui/material/styles'; import Box from '@mui/material/Box'; -import { memo, useCallback, useLayoutEffect, useMemo, useState } from 'react'; +import { ComponentProps, memo, useCallback, useLayoutEffect, useMemo, useState } from 'react'; import Slide, { SlideProps } from '@mui/material/Slide'; import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx'; import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx'; @@ -84,6 +84,99 @@ const BaseMobileReaderProgressBar = ({ const finalReaderDirection = isHorizontal ? readerDirection : 'ltr'; const currentPagesIndex = useMemo(() => getPage(currentPageIndex, pages).pagesIndex, [currentPageIndex, pages]); + const progressBarSlotProps: ComponentProps['slotProps'] = useMemo( + () => ({ + container: { + sx: { + flexGrow: 1, + position: 'relative', + display: 'flex', + justifyItems: 'center', + alignItems: 'stretch', + backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85), + borderRadius: 100, + boxShadow: 2, + }, + }, + progressBarRoot: { + sx: { + flexGrow: 1, + gap: 0, + ...applyStyles(isVertical, { + flexDirection: 'column', + }), + ...applyStyles(isHorizontal, { + alignItems: 'stretch', + }), + }, + }, + progressBarSlotsActionArea: { + sx: { + alignItems: 'center', + cursor: 'pointer', + ...applyStyles(isVertical, { + width: '100%', + flexDirection: 'column', + px: 2, + }), + ...applyStyles(isHorizontal, { + height: '100%', + py: 2, + }), + }, + }, + progressBarSlotsContainer: { + sx: { + borderRadius: 100, + backgroundColor: 'background.default', + ...applyStyles(isVertical, { + flexDirection: 'column', + py: 1, + }), + ...applyStyles(isHorizontal, { + px: 1, + }), + }, + }, + progressBarSlot: { + sx: { + ...applyStyles(isVertical, { + width: '20px', + }), + ...applyStyles(isHorizontal, { + height: '20px', + }), + }, + }, + progressBarCurrentPageSlot: { + sx: { + display: 'flex', + zIndex: 1, + cursor: 'inherit', + ...applyStyles(isVertical, { + justifyContent: 'center', + }), + ...applyStyles(isHorizontal, { + alignItems: 'center', + }), + }, + }, + progressBarPageTexts: { + base: { + sx: { + ...applyStyles(isVertical, { + py: 1, + }), + ...applyStyles(isHorizontal, { + px: 1, + }), + }, + }, + }, + }), + [isVertical, isHorizontal], + ); + const progressBarCurrentPage = useMemo( () => ({ progressBarCurrentPage: ( @@ -209,93 +302,7 @@ const BaseMobileReaderProgressBar = ({ [isVertical, isHorizontal], )} slotProps={{ - container: { - sx: { - flexGrow: 1, - position: 'relative', - display: 'flex', - justifyItems: 'center', - alignItems: 'stretch', - backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85), - borderRadius: 100, - boxShadow: 2, - }, - }, - progressBarRoot: { - sx: { - flexGrow: 1, - gap: 0, - ...applyStyles(isVertical, { - flexDirection: 'column', - }), - ...applyStyles(isHorizontal, { - alignItems: 'stretch', - }), - }, - }, - progressBarSlotsActionArea: { - sx: { - alignItems: 'center', - cursor: 'pointer', - ...applyStyles(isVertical, { - width: '100%', - flexDirection: 'column', - px: 2, - }), - ...applyStyles(isHorizontal, { - height: '100%', - py: 2, - }), - }, - }, - progressBarSlotsContainer: { - sx: { - borderRadius: 100, - backgroundColor: 'background.default', - ...applyStyles(isVertical, { - flexDirection: 'column', - py: 1, - }), - ...applyStyles(isHorizontal, { - px: 1, - }), - }, - }, - progressBarSlot: { - sx: { - ...applyStyles(isVertical, { - width: '20px', - }), - ...applyStyles(isHorizontal, { - height: '20px', - }), - }, - }, - progressBarCurrentPageSlot: { - sx: { - display: 'flex', - zIndex: 1, - cursor: 'inherit', - ...applyStyles(isVertical, { - justifyContent: 'center', - }), - ...applyStyles(isHorizontal, { - alignItems: 'center', - }), - }, - }, - progressBarPageTexts: { - base: { - sx: { - ...applyStyles(isVertical, { - py: 1, - }), - ...applyStyles(isHorizontal, { - px: 1, - }), - }, - }, - }, + ...progressBarSlotProps, progressBarReadPages: { sx: { backgroundColor: 'primary.main',