ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Properly center loading placeholders of non reader images

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

11
src/modules/core/components/SpinnerImage.tsx
View File

@@ -28,6 +28,7 @@ interface IProps {
spinnerStyle?: SxProps<Theme> & { small?: boolean }; spinnerStyle?: SxProps<Theme> & { small?: boolean };
imgStyle?: SxProps<Theme>; imgStyle?: SxProps<Theme>;
hideImgStyle?: Omit<SxProps<Theme>, 'accentColor'>;
onLoad?: () => void; onLoad?: () => void;
onError?: () => void; onError?: () => void;
@@ -51,6 +52,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
onError, onError,
spinnerStyle: { small, ...spinnerStyle } = {}, spinnerStyle: { small, ...spinnerStyle } = {},
imgStyle, imgStyle,
hideImgStyle,
priority, priority,
retryKeyPrefix, retryKeyPrefix,
} = props; } = props;
@@ -147,11 +149,10 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
sx={[ sx={[
...(Array.isArray(imgStyle) ? (imgStyle ?? []) : [imgStyle]), ...(Array.isArray(imgStyle) ? (imgStyle ?? []) : [imgStyle]),
applyStyles(!imageSourceUrl || isLoading || hasError, { applyStyles(!imageSourceUrl || isLoading || hasError, {
visibility: 'hidden', ...hideImgStyle,
minWidth: 0, ...applyStyles(!hideImgStyle, {
minHeight: 0, display: 'none',
width: 0, }),
height: 0,
}), }),
]} ]}
ref={imgRef} ref={imgRef}

10
src/modules/reader/components/viewer/ReaderPage.tsx
View File

@@ -96,9 +96,6 @@ export const ReaderPage = forwardRef(
display: 'none', display: 'none',
}), }),
...getImageMarginStyling(doublePage, position), ...getImageMarginStyling(doublePage, position),
...applyStyles(marginTop !== undefined, {
mt: `${marginTop}px`,
}),
}} }}
imgStyle={{ imgStyle={{
...getImageWidthStyling( ...getImageWidthStyling(
@@ -122,6 +119,13 @@ export const ReaderPage = forwardRef(
mt: `${marginTop}px`, mt: `${marginTop}px`,
}), }),
}} }}
hideImgStyle={{
visibility: 'hidden',
minWidth: 0,
minHeight: 0,
width: 0,
height: 0,
}}
/> />
); );
}, },