diff --git a/frontend/src/Photos/Photo.tsx b/frontend/src/Photos/Photo.tsx index cfd37ed..c659683 100644 --- a/frontend/src/Photos/Photo.tsx +++ b/frontend/src/Photos/Photo.tsx @@ -25,36 +25,66 @@ export interface IPhotoComponentProps { export const PhotoComponent: React.FunctionComponent = ( props, ) => { + const [ + smallPreviewFetching, + setSmallPreviewFetching, + ] = React.useState(false); + const [ + largePreviewFetching, + setLargePreviewFetching, + ] = React.useState(false); + const [originalFetching, setOriginalFetching] = React.useState( + false, + ); + const [smallPreview, setSmallPreview] = React.useState(null); const [largePreview, setLargePreview] = React.useState(null); const [original, setOriginal] = React.useState(null); const imgRef = React.useRef(null); React.useEffect(() => { - async function fetchSizes() { - if (props.photo && !smallPreview) { + async function fetchSmall() { + if (props.photo && !smallPreview && !smallPreviewFetching) { + setSmallPreviewFetching(true); const smallPreviewFetch = await fetch( getPhotoThumbPath(props.photo, PreviewSize), ); setSmallPreview( URL.createObjectURL(await smallPreviewFetch.blob()), ); + //console.log("got small"); } - if (props.photo && !largePreview) { + } + void fetchSmall(); + }, [smallPreview, smallPreviewFetching]); + + React.useEffect(() => { + async function fetchLarge() { + if (props.photo && !largePreview && !largePreviewFetching) { + setLargePreviewFetching(true); const largePreviewFetch = await fetch( getPhotoThumbPath(props.photo, LargeSize), ); setLargePreview( URL.createObjectURL(await largePreviewFetch.blob()), ); - } - if (props.photo && !original) { - const originalFetch = await fetch(getPhotoImgPath(props.photo)); - setOriginal(URL.createObjectURL(await originalFetch.blob())); + //console.log("got large"); } } - void fetchSizes(); - }); + void fetchLarge(); + }, [largePreview, largePreviewFetching]); + + React.useEffect(() => { + async function fetchOriginal() { + if (props.photo && !original && !originalFetching) { + setOriginalFetching(true); + const originalFetch = await fetch(getPhotoImgPath(props.photo)); + setOriginal(URL.createObjectURL(await originalFetch.blob())); + //console.log("got original"); + } + } + void fetchOriginal(); + }, [original, originalFetching]); if (!props.photo && !props.photoState?.fetching) { props.fetchPhoto(props.id);