ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Memoize mobile progress bar position related styling

Browse Source 
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
This commit is contained in:
schroda
2025-01-02 21:57:01 +01:00
parent b5a0ec7371
commit 52f5415c9f
1 changed files with 95 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,7 +12,7 @@ import SkipNextIcon from '@mui/icons-material/SkipNext';
import Stack from '@mui/material/Stack'; import Stack from '@mui/material/Stack';
import { alpha } from '@mui/material/styles'; import { alpha } from '@mui/material/styles';
import Box from '@mui/material/Box'; 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 Slide, { SlideProps } from '@mui/material/Slide';
import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx'; import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx';
import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx'; import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
@@ -84,6 +84,99 @@ const BaseMobileReaderProgressBar = ({
const finalReaderDirection = isHorizontal ? readerDirection : 'ltr'; const finalReaderDirection = isHorizontal ? readerDirection : 'ltr';
const currentPagesIndex = useMemo(() => getPage(currentPageIndex, pages).pagesIndex, [currentPageIndex, pages]); const currentPagesIndex = useMemo(() => getPage(currentPageIndex, pages).pagesIndex, [currentPageIndex, pages]);
const progressBarSlotProps: ComponentProps<typeof ReaderProgressBar>['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( const progressBarCurrentPage = useMemo(
() => ({ () => ({
progressBarCurrentPage: ( progressBarCurrentPage: (
@@ -209,93 +302,7 @@ const BaseMobileReaderProgressBar = ({
[isVertical, isHorizontal], [isVertical, isHorizontal],
)} )}
slotProps={{ slotProps={{
container: { ...progressBarSlotProps,
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,
}),
},
},
},
progressBarReadPages: { progressBarReadPages: {
sx: { sx: {
backgroundColor: 'primary.main', backgroundColor: 'primary.main',