13269539154

Committed 11 Feb 2025 06:07PM UTC coverage: 75.601% (-0.03%) from 75.626%

Build # 13269539154

Build Type

Pull #6581

github

Committed by

web-flow

Commit Message

Merge 51561cdda into b2203e1c7

Pull Request Pull Request #6581: refactor: image loading handlers

Run Details

10832 of 16500 branches covered (65.65%)

Branch coverage included in aggregate %.

21 of 24 new or added lines in 2 files covered. (87.5%)

8 existing lines in 2 files now uncovered.

16915 of 20202 relevant lines covered (83.73%)

397.39 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

75.0

/packages/lib-react-components/src/hooks/useProgressiveImage.js

import { useEffect, useRef, useState } from 'react'

const defaultPlaceholder = {
  naturalHeight: 600,
  naturalWidth: 800,
  src: ''
}

const DEFAULT_HANDLER = () => false

function preloadImage({
  src,
  onLoad = DEFAULT_HANDLER,
  onError = DEFAULT_HANDLER
}) {
  const { Image } = window
  const img = new Image()
  img.onload = onLoad
  img.onerror = onError
  img.src = src
}

export default function useProgressiveImage({
  delay = 0,
  placeholderSrc = '',
  src,
  onLoad = DEFAULT_HANDLER,
  onError = DEFAULT_HANDLER
}) {
  const placeholder = {
    ...defaultPlaceholder,
    src: placeholderSrc
  }
  const [loading, setLoading] = useState(true)
  const imgRef = useRef(placeholder)
  const [error, setError] = useState(null)

  function onImageLoad(event) {
    imgRef.current = event.target
    onLoad(event)
    setLoading(false)
  }

  function onImageError(error) {
    onError(error)
    setError(error)
    setLoading(false)
  }

  function fetchImage() {
    setLoading(true)
    setError(null)
    preloadImage({
      src,
      onLoad: delay ? event => setTimeout(onImageLoad, delay, event) : onImageLoad,
      onError: onImageError
    })
  }

  useEffect(function onNewImage() {
    if (src) {
      fetchImage()
    }
  }, [src])

  return { img: imgRef.current, error, loading }
}

1	import { useEffect, useRef, useState } from 'react'	1,093!
2
3	const defaultPlaceholder = {	1✔
4	naturalHeight: 600,
5	naturalWidth: 800,
6	src: ''
7	}
8
9	const DEFAULT_HANDLER = () => false	7✔
10
11	function preloadImage({
12	src,	15✔
13	onLoad = DEFAULT_HANDLER,	15!
14	onError = DEFAULT_HANDLER	15!
15	}) {
16	const { Image } = window	15✔
17	const img = new Image()	15✔
18	img.onload = onLoad	15✔
19	img.onerror = onError	15✔
20	img.src = src	15✔
21	}
22
23	export default function useProgressiveImage({
24	delay = 0,	21!
25	placeholderSrc = '',	21!
26	src,	21✔
27	onLoad = DEFAULT_HANDLER,	21!
28	onError = DEFAULT_HANDLER	21!
29	}) {	21✔
30	const placeholder = {	21✔
31	...defaultPlaceholder,
32	src: placeholderSrc
33	}
34	const [loading, setLoading] = useState(true)	21✔
35	const imgRef = useRef(placeholder)	21✔
36	const [error, setError] = useState(null)	21✔
37
38	function onImageLoad(event) {
39	imgRef.current = event.target	7✔
40	onLoad(event)	7✔
41	setLoading(false)	7✔
42	}
43
44	function onImageError(error) {
NEW 45	onError(error)	×
NEW 46	setError(error)	×
NEW 47	setLoading(false)	×
48	}
49
50	function fetchImage() {
51	setLoading(true)	15✔
52	setError(null)	15✔
53	preloadImage({	15✔
54	src,
55	onLoad: delay ? event => setTimeout(onImageLoad, delay, event) : onImageLoad,	1✔
56	onError: onImageError
57	})
58	}
59
60	useEffect(function onNewImage() {	21✔
61	if (src) {	15✔
62	fetchImage()	15✔
63	}
64	}, [src])
65
66	return { img: imgRef.current, error, loading }	21✔
67	}

zooniverse / front-end-monorepo / 13269539154

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous