Get lazy loading cheap with intersectionobserver i ccc4a072ab24457ea3de05cd8ed8f5ed

sublime-medium.tsx

const useLazyMediaLoad = media => {
	const [url, setUrl] = useState<?string>(null)
	const targetRef = useRef<?HTMLElement>(null)

	useEffect(() => {
		if (!IntersectionObserver) {
			thumbLoader(media).then(setUrl)
		} else if (targetRef.current) {
			let observer = new IntersectionObserver(
				entries =>
					entries.forEach(entry => {
						if (entry.isIntersecting) {
							thumbLoader(media).then(setUrl)
							observer = observer.disconnect()
						}
					}),
				{ rootMargin: '0px 0px 200px 0px' }
			)
			observer.observe(targetRef.current)

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

	return [url, targetRef]
}

const ExerciseItem = ({ exercise }: Props) => {
	const [url, targetRef] = useLazyMediaLoad(exercise.media)

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