19 lines
730 B
TypeScript
19 lines
730 B
TypeScript
|
import { useCallback, useState } from "react";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Tracks whether the image at `url` has finished loading, keyed by URL.
|
||
|
|
*
|
||
|
|
* Artwork URLs change in place when a new immutable revision is published; a
|
||
|
|
* plain boolean load flag would keep showing the previous revision's pixels at
|
||
|
|
* full opacity while the replacement is still fetching. Keying the loaded
|
||
|
|
* state by URL makes a changed `src` start hidden until its own load event.
|
||
|
|
*/
|
||
|
|
export function useImageLoaded(url: string | undefined | null): {
|
||
|
|
loaded: boolean;
|
||
|
|
onLoad: () => void;
|
||
|
|
} {
|
||
|
|
const [loadedUrl, setLoadedUrl] = useState("");
|
||
|
|
const onLoad = useCallback(() => setLoadedUrl(url ?? ""), [url]);
|
||
|
|
return { loaded: !!url && loadedUrl === url, onLoad };
|
||
|
|
}
|