From 91a1f75de6f44fc45c71e9172290ec70982400fc Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Thu, 19 Dec 2024 16:38:52 +0100
Subject: [PATCH] Properly center loading placeholders of non reader images

---
 src/modules/core/components/SpinnerImage.tsx        | 11 ++++++-----
 src/modules/reader/components/viewer/ReaderPage.tsx | 10 +++++++---
 2 files changed, 13 insertions(+), 8 deletions(-)
diff --git a/src/modules/core/components/SpinnerImage.tsx b/src/modules/core/components/SpinnerImage.tsx
index e1bef79b..c0230ea0 100644
--- a/src/modules/core/components/SpinnerImage.tsx
+++ b/src/modules/core/components/SpinnerImage.tsx
@@ -28,6 +28,7 @@ interface IProps {
 
     spinnerStyle?: SxProps<Theme> & { small?: boolean };
     imgStyle?: SxProps<Theme>;
+    hideImgStyle?: Omit<SxProps<Theme>, 'accentColor'>;
 
     onLoad?: () => void;
     onError?: () => void;
@@ -51,6 +52,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
         onError,
         spinnerStyle: { small, ...spinnerStyle } = {},
         imgStyle,
+        hideImgStyle,
         priority,
         retryKeyPrefix,
     } = props;
@@ -147,11 +149,10 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
                     sx={[
                         ...(Array.isArray(imgStyle) ? (imgStyle ?? []) : [imgStyle]),
                         applyStyles(!imageSourceUrl || isLoading || hasError, {
-                            visibility: 'hidden',
-                            minWidth: 0,
-                            minHeight: 0,
-                            width: 0,
-                            height: 0,
+                            ...hideImgStyle,
+                            ...applyStyles(!hideImgStyle, {
+                                display: 'none',
+                            }),
                         }),
                     ]}
                     ref={imgRef}
diff --git a/src/modules/reader/components/viewer/ReaderPage.tsx b/src/modules/reader/components/viewer/ReaderPage.tsx
index 2b6853d2..ac1f553b 100644
--- a/src/modules/reader/components/viewer/ReaderPage.tsx
+++ b/src/modules/reader/components/viewer/ReaderPage.tsx
@@ -96,9 +96,6 @@ export const ReaderPage = forwardRef(
                         display: 'none',
                     }),
                     ...getImageMarginStyling(doublePage, position),
-                    ...applyStyles(marginTop !== undefined, {
-                        mt: `${marginTop}px`,
-                    }),
                 }}
                 imgStyle={{
                     ...getImageWidthStyling(
@@ -122,6 +119,13 @@ export const ReaderPage = forwardRef(
                         mt: `${marginTop}px`,
                     }),
                 }}
+                hideImgStyle={{
+                    visibility: 'hidden',
+                    minWidth: 0,
+                    minHeight: 0,
+                    width: 0,
+                    height: 0,
+                }}
             />
         );
     },
