@coin-voyage/paykit/dist/components/ui/LazyImage/index.js

Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.

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(() => {
        if (!(imageRef.current?.complete && imageRef.current.naturalHeight !== 0)) {
            setLoaded(false);
        }
    }, [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 } }) }));
}
//# sourceMappingURL=index.js.map