• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

zooniverse / front-end-monorepo / 13269539154

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

Pull #6581

github

web-flow
Merge 51561cdda into b2203e1c7
Pull Request #6581: refactor: image loading handlers

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
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
}
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2026 Coveralls, Inc