4618-c4ee6390e90fb2942f64.js

"use strict";(self.webpackChunkembla_carousel_docs=self.webpackChunkembla_carousel_docs||[]).push([[4618],{4618:function(a,e,n){n.r(e),e.default="import React, { useState, useCallback } from 'react'\n\nconst PLACEHOLDER_SRC = `data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D`\n\ntype PropType = {\n  imgSrc: string\n  inView: boolean\n  index: number\n}\n\nexport const LazyLoadImage: React.FC<PropType> = (props) => {\n  const { imgSrc, inView } = props\n  const [hasLoaded, setHasLoaded] = useState(false)\n\n  const setLoaded = useCallback(() => {\n    if (inView) setHasLoaded(true)\n  }, [inView, setHasLoaded])\n\n  return (\n    <div className=\"embla__slide\">\n      <div\n        className={'embla__lazy-load'.concat(\n          hasLoaded ? ' embla__lazy-load--has-loaded' : ''\n        )}\n      >\n        {!hasLoaded && <span className=\"embla__lazy-load__spinner\" />}\n        <img\n          className=\"embla__slide__img embla__lazy-load__img\"\n          onLoad={setLoaded}\n          src={inView ? imgSrc : PLACEHOLDER_SRC}\n          alt=\"Your alt text\"\n          data-src={imgSrc}\n        />\n      </div>\n    </div>\n  )\n}\n"}}]);
//# sourceMappingURL=4618-c4ee6390e90fb2942f64.js.map