laz-loading image
import useInView from "react-cool-inview";
const LazyImage = ({ width, height, ...rest }) => {
const { observe, inView } = useInView({
// Stop observe when the target enters the viewport, so the "inView" only triggered once
unobserveOnEnter: true,
// For better UX, we can grow the root margin so the image will be loaded before it comes to the viewport
rootMargin: "50px",
});
return (
<div className="placeholder" style={{ width, height }} ref={observe}>
{inView && <img {...rest} />}
</div>
);
};