Convert reader image placeholder styling to vw/vh

src/modules/reader/components/viewer/ReaderPage.tsx

@@ -76,6 +76,7 @@ const BaseReaderPage = ({
     onError,
     setRef,
     readerNavBarWidth,
+    isLoaded,
     ...props
 }: Omit<ComponentProps<typeof SpinnerImage>, 'ref' | 'spinnerStyle' | 'imgStyle' | 'onLoad' | 'onError'> &
     Pick<IReaderSettings, 'readingMode' | 'customFilter' | 'pageScaleMode' | 'shouldStretchPage' | 'readerWidth'> &
@@ -91,6 +92,7 @@ const BaseReaderPage = ({
         onLoad: ReaderPagerProps['onLoad'];
         onError: ReaderPagerProps['onError'];
         setRef?: (pagesIndex: number, ref: HTMLElement | null) => void;
+        isLoaded?: boolean;
     }) => {
     const { src } = props;
 
@@ -122,8 +124,8 @@ const BaseReaderPage = ({
                     shouldStretchPage,
                     pageScaleMode,
                     readerWidth,
+                    readerNavBarWidth + scrollbarYSize,
                     scrollbarXSize,
-                    scrollbarYSize,
                     doublePage,
                     isTabletWidth,
                 ),
@@ -142,10 +144,6 @@ const BaseReaderPage = ({
                     readerNavBarWidth + scrollbarYSize,
                     scrollbarXSize,
                 ),
-                display: 'block',
-                ...applyStyles(!display, {
-                    display: 'none',
-                }),
                 filter: getCustomFilterString(customFilter),
                 objectFit: 'contain',
                 objectPosition: position,
@@ -154,6 +152,13 @@ const BaseReaderPage = ({
                 ...applyStyles(marginTop !== undefined, {
                     mt: `${marginTop}px`,
                 }),
+                display: 'block',
+                ...applyStyles(!display, {
+                    display: 'none',
+                }),
+                ...applyStyles(!isLoaded, {
+                    margin: 'unset',
+                }),
             }}
             hideImgStyle={{
                 visibility: 'hidden',

src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx

@@ -77,6 +77,7 @@ const BaseReaderDoublePagedPager = ({
                             page,
                             pagesIndex,
                             true,
+                            pageLoadStates[primary.index].loaded,
                             onLoad,
                             onError,
                             shouldLoad,
@@ -92,6 +93,7 @@ const BaseReaderDoublePagedPager = ({
                                 { ...page, primary: { ...page.secondary! } },
                                 pagesIndex,
                                 false,
+                                pageLoadStates[secondary.index].loaded,
                                 onLoad,
                                 onError,
                                 shouldLoad,

src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx

@@ -38,6 +38,7 @@ const BaseReaderHorizontalPager = ({
                     page,
                     pagesIndex,
                     true,
+                    pageLoadStates[page.primary.index].loaded,
                     onLoad,
                     onError,
                     shouldLoad,

src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx

@@ -29,6 +29,7 @@ const BaseReaderPagedPager = ({
                     page,
                     pagesIndex,
                     true,
+                    pageLoadStates[page.primary.index].loaded,
                     onLoad,
                     onError,
                     shouldLoad,

src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx

@@ -35,6 +35,7 @@ const BaseReaderVerticalPager = ({
                     page,
                     pagesIndex,
                     true,
+                    pageLoadStates[page.primary.index].loaded,
                     onLoad,
                     onError,
                     shouldLoad,