diff --git a/src/components/lazy-image/index.jsx b/src/components/lazy-image/index.jsx new file mode 100644 index 0000000..5c54f7d --- /dev/null +++ b/src/components/lazy-image/index.jsx @@ -0,0 +1,22 @@ +import { useState, Fragment, useEffect } from 'react'; + +const LazyImage = ({ placeholder, src, alt, ...rest }) => { + const [loading, setLoading] = useState(true); + + useEffect(() => { + const imageToLoad = new Image(); + imageToLoad.src = src; + + imageToLoad.onload = () => { + setLoading(false); + }; + }, [src]); + + return ( + + {loading ? placeholder : {alt}} + + ); +}; + +export default LazyImage;