Get lazy loading cheap with intersectionobserver i ccc4a072ab24457ea3de05cd8ed8f5ed

sublime-medium.tsx

const ExerciseItem = ({ exercise }: Props) => {
	const [url, setUrl] = useState<?string>(null)
	const thisRef = useRef<?HTMLDivElement>(null)

	useEffect(() => {
		let observer = new IntersectionObserver(
			entries => entries.forEach(entry => {
				if (entry.isIntersecting) {
					thumbLoader(media).then(setUrl)
					observer = observer.disconnect()
				}
			})
		)
		observer.observe(thisRef.current)

		return () => (observer = observer && observer.disconnect())
	}, [media, thumbLoader])

	return (
		<div
			css={styles.thumb}
			style={{ backgroundImage: `url(${url})` }}
			ref={thisRef}
		/>
	)
}