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

Show image placeholder

Browse Source 
Instead of trying to load invalid url
This commit is contained in:
schroda
2024-03-10 14:33:55 +01:00
parent 21eda17bc1
commit f913f5ec32
1 changed files with 29 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/util/SpinnerImage.tsx
View File

@@ -14,6 +14,7 @@ import { Theme, SxProps, Stack, Button } from '@mui/material';
import BrokenImageIcon from '@mui/icons-material/BrokenImage'; import BrokenImageIcon from '@mui/icons-material/BrokenImage';
import RefreshIcon from '@mui/icons-material/Refresh'; import RefreshIcon from '@mui/icons-material/Refresh';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import ImageIcon from '@mui/icons-material/Image';
import { requestManager } from '@/lib/requests/RequestManager.ts'; import { requestManager } from '@/lib/requests/RequestManager.ts';
import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts'; import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
import { Priority } from '@/lib/Queue.ts'; import { Priority } from '@/lib/Queue.ts';
@@ -33,6 +34,8 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
const { t } = useTranslation(); const { t } = useTranslation();
const showMissingImageIcon = !src.length;
const [imageSourceUrl, setImageSourceUrl] = useState(''); const [imageSourceUrl, setImageSourceUrl] = useState('');
const [imgLoadRetryKey, setImgLoadRetryKey] = useState(0); const [imgLoadRetryKey, setImgLoadRetryKey] = useState(0);
const [isLoading, setIsLoading] = useState<boolean | undefined>(undefined); const [isLoading, setIsLoading] = useState<boolean | undefined>(undefined);
@@ -48,6 +51,10 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
}; };
useEffect(() => { useEffect(() => {
if (showMissingImageIcon) {
return () => {};
}
let tmpImageSourceUrl: string; let tmpImageSourceUrl: string;
const imageRequest = requestManager.requestImage(src, Priority.HIGH); const imageRequest = requestManager.requestImage(src, Priority.HIGH);
let cacheTimeout: NodeJS.Timeout; let cacheTimeout: NodeJS.Timeout;
@@ -121,17 +128,28 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
</Box> </Box>
)} )}
<img {showMissingImageIcon ? (
key={`${src}_${imgLoadRetryKey}`} <Stack
style={{ height="100%"
...imgStyle, alignItems="center"
display: !imageSourceUrl || isLoading || hasError ? 'none' : imgStyle?.display, justifyContent="center"
}} sx={{ background: (theme) => theme.palette.background.default }}
ref={imgRef} >
src={imageSourceUrl} <ImageIcon fontSize="large" />
alt={alt} </Stack>
draggable={false} ) : (
/> <img
key={`${src}_${imgLoadRetryKey}`}
style={{
...imgStyle,
display: !imageSourceUrl || isLoading || hasError ? 'none' : imgStyle?.display,
}}
ref={imgRef}
src={imageSourceUrl}
alt={alt}
draggable={false}
/>
)}
</> </>
); );
}); });