Properly center loading placeholders of non reader images
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user