Something went wrong. Try again.
Explore blocks, labels, lists, and posts on Bluesky. skytrace.aly.town
typescript react bluesky atproto
Something went wrong. Try again.
12345678910111213141516171819202122232425import { useLayoutEffect, useRef, useState } from 'react'
export function useImageLoadStatus(src: string | undefined) { const imageRef = useRef<HTMLImageElement>(null) const [status, setStatus] = useState({ src, failed: false, loaded: false }) const failed = status.src === src && status.failed const loaded = status.src === src && status.loaded
useLayoutEffect(() => { const image = imageRef.current if (!src || !image?.complete) return setStatus({ src, failed: image.naturalWidth === 0, loaded: image.naturalWidth > 0 }) }, [src])
function handleLoad() { setStatus({ src, failed: false, loaded: true }) }
function handleError() { setStatus({ src, failed: true, loaded: false }) }
return { imageRef, failed, loaded, handleLoad, handleError }}