inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2025-04-28 19:46:46 +00:00
Code

Api image fix (#6034)

Browse Source 
* Replace invalid image with skeleton

* Simplify ApiImage

* Flag unused variable
This commit is contained in:
Oliver 2023-12-05 23:20:41 +11:00 committed by GitHub
parent 8605832693
commit 22800d6b10
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/frontend/src/components/images/ApiImage.tsx
View File

@ -4,13 +4,7 @@
* *
* Image caching is handled automagically by the browsers cache * Image caching is handled automagically by the browsers cache
*/ */
import { import { Image, ImageProps, Skeleton, Stack } from '@mantine/core';
Image,
ImageProps,
LoadingOverlay,
Overlay,
Stack
} from '@mantine/core';
import { useId } from '@mantine/hooks'; import { useId } from '@mantine/hooks';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { useState } from 'react'; import { useState } from 'react';
@ -27,7 +21,7 @@ export function ApiImage(props: ImageProps) {
const queryKey = useId(); const queryKey = useId();
const imgQuery = useQuery({ const _imgQuery = useQuery({
queryKey: ['image', queryKey, props.src], queryKey: ['image', queryKey, props.src],
enabled: enabled:
authorized && authorized &&
@ -52,7 +46,8 @@ export function ApiImage(props: ImageProps) {
setImage(url); setImage(url);
break; break;
default: default:
// User is not authorized to view this image // User is not authorized to view this image, or the image is not available
setImage('');
setAuthorized(false); setAuthorized(false);
console.error(`Error fetching image ${props.src}:`, response); console.error(`Error fetching image ${props.src}:`, response);
break; break;
@ -71,9 +66,14 @@ export function ApiImage(props: ImageProps) {
return ( return (
<Stack> <Stack>
<LoadingOverlay visible={imgQuery.isLoading || imgQuery.isFetching} /> {image && image.length > 0 ? (
<Image {...props} src={image} withPlaceholder fit="contain" /> <Image {...props} src={image} withPlaceholder fit="contain" />
{imgQuery.isError && <Overlay color="#F00" />} ) : (
<Skeleton
height={props?.height ?? props.width}
width={props?.width ?? props.height}
/>
)}
</Stack> </Stack>
); );
} }