From fe3bbedde9cd20d41614414f67d174dfe191e50d Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Mon, 16 Sep 2024 22:23:58 +0200
Subject: [PATCH] Prevent blinking on page switch in single mode

---
 src/components/reader/Page.tsx             |  6 ++++--
 src/components/reader/pager/PagedPager.tsx | 11 ++++++++++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/reader/Page.tsx b/src/components/reader/Page.tsx
index 51d3be50..8e5f0725 100644
--- a/src/components/reader/Page.tsx
+++ b/src/components/reader/Page.tsx
@@ -18,6 +18,7 @@ export const isHorizontalReaderType = (readerType: ReaderType): boolean =>
     ['ContinuesHorizontalLTR', 'ContinuesHorizontalRTL'].includes(readerType);
 
 export function imageStyle(settings: IReaderSettings): CSSProperties {
+    const isDoublePageReader = ['DoubleRTL', 'DoubleLTR'].includes(settings.readerType);
     const isVertical = settings.readerType === 'ContinuesVertical';
     const isHorizontal = isHorizontalReaderType(settings.readerType);
 
@@ -63,10 +64,11 @@ interface IProps {
     index: number;
     onImageLoad: () => void;
     settings: IReaderSettings;
+    display?: boolean;
 }
 
 export const Page = forwardRef((props: IProps, ref: any) => {
-    const { src, index, onImageLoad, settings } = props;
+    const { src, index, onImageLoad, settings, display = true } = props;
 
     const theme = useTheme();
     const isMobileWidth = useMediaQuery(theme.breakpoints.down('md'));
@@ -78,7 +80,7 @@ export const Page = forwardRef((props: IProps, ref: any) => {
         <Box
             ref={ref}
             sx={{
-                display: 'flex',
+                display: display ? 'flex' : 'none',
                 flexDirection: 'column',
                 alignItems: 'center',
                 justifyContent: 'center',
diff --git a/src/components/reader/pager/PagedPager.tsx b/src/components/reader/pager/PagedPager.tsx
index 3cc53198..7d54182e 100644
--- a/src/components/reader/pager/PagedPager.tsx
+++ b/src/components/reader/pager/PagedPager.tsx
@@ -121,7 +121,16 @@ export function PagedPager(props: IReaderProps) {
             }}
             onClick={clickControl}
         >
-            <Page key={curPage} index={curPage} onImageLoad={() => {}} src={pages[curPage].src} settings={settings} />
+            {pages.map(({ index, src }) => (
+                <Page
+                    key={src}
+                    index={index}
+                    onImageLoad={() => {}}
+                    src={src}
+                    settings={settings}
+                    display={index === curPage}
+                />
+            ))}
         </Box>
     );
 }