@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
31 lines (30 loc) • 1.34 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
export default function LazyImage({ src, alt, width, height }) {
const imageRef = useRef(null);
const [loaded, setLoaded] = useState(true);
useEffect(() => {
const img = imageRef.current;
if (!img)
return;
if (img.complete && img.naturalHeight !== 0) {
window.requestAnimationFrame(() => setLoaded(true));
}
else {
const onLoad = () => window.requestAnimationFrame(() => setLoaded(true));
const onError = () => window.requestAnimationFrame(() => setLoaded(false));
img.addEventListener("load", onLoad);
img.addEventListener("error", onError);
return () => {
img.removeEventListener("load", onLoad);
img.removeEventListener("error", onError);
};
}
}, [src]);
return (_jsx("div", { style: {
width,
height,
background: "rgba(0,0,0,0.02)",
boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.02)",
}, children: _jsx("img", { ref: imageRef, src: src, alt: alt, width: width, height: height, onLoad: () => setLoaded(true), style: { transition: "opacity 0.2s ease", opacity: loaded ? 1 : 0 } }) }));
}