13462745198

Committed 21 Feb 2025 06:15PM UTC coverage: 75.491% (-0.02%) from 75.515%

Build # 13462745198

Build Type

push

github

Committed by

web-flow

Commit Message

refactor: image loading handlers (#6581)

* refactor: image loading handlers

Some changes to clean up image loading code, and speed up subject image loading.
- lib-classifier: remove `useEffect` from `useSubjectImage`, so that image loading code runs on image load, rather than waiting for the next React render cycle.
- lib-react-components: when there's no delay for `useProgressiveImage`, run the `onLoad` handler immediately, rather than waiting for the next event cycle.
- refactor `onLoad` event handlers to use `load` events, rather than `Image` objects. This brings the event handlers in line with the DOM standard.

* add mock load events to classifier tests

* fix: add frameIndex to onSubjectReady callback

* add frame index to ImageAndText viewer

Run Details

10850 of 16567 branches covered (65.49%)

Branch coverage included in aggregate %.

29 of 32 new or added lines in 6 files covered. (90.63%)

8 existing lines in 2 files now uncovered.

16951 of 20260 relevant lines covered (83.67%)

398.62 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,041!
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,	20!
25	placeholderSrc = '',	20!
26	src,	20✔
27	onLoad = DEFAULT_HANDLER,	20!
28	onError = DEFAULT_HANDLER	20!
29	}) {	20✔
30	const placeholder = {	20✔
31	...defaultPlaceholder,
32	src: placeholderSrc
33	}
34	const [loading, setLoading] = useState(true)	20✔
35	const imgRef = useRef(placeholder)	20✔
36	const [error, setError] = useState(null)	20✔
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() {	20✔
61	if (src) {	15✔
62	fetchImage()	15✔
63	}
64	}, [src])
65
66	return { img: imgRef.current, error, loading }	20✔
67	}

zooniverse / front-end-monorepo / 13462745198

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