Properly center loading placeholders of non reader images

This commit is contained in:
schroda
2024-12-19 16:38:52 +01:00
parent 90934b164a
commit 91a1f75de6
2 changed files with 13 additions and 8 deletions

View File

@@ -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}

View File

@@ -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,
}}
/>
);
},