( img: ImgElementWithDataProp, placeholder: PlaceholderValue, onLoadRef: React.MutableRefObject<OnLoad | undefined>, onLoadingCompleteRef: React.MutableRefObject<OnLoadingComplete | undefined>, setBlurComplete: (b: boolean) => void, unoptimized: boolean, sizesInput: string | undefined )
| 60 | // See https://stackoverflow.com/q/39777833/266535 for why we use this ref |
| 61 | // handler instead of the img's onLoad attribute. |
| 62 | function handleLoading( |
| 63 | img: ImgElementWithDataProp, |
| 64 | placeholder: PlaceholderValue, |
| 65 | onLoadRef: React.MutableRefObject<OnLoad | undefined>, |
| 66 | onLoadingCompleteRef: React.MutableRefObject<OnLoadingComplete | undefined>, |
| 67 | setBlurComplete: (b: boolean) => void, |
| 68 | unoptimized: boolean, |
| 69 | sizesInput: string | undefined |
| 70 | ) { |
| 71 | const src = img?.src |
| 72 | if (!img || img['data-loaded-src'] === src) { |
| 73 | return |
| 74 | } |
| 75 | img['data-loaded-src'] = src |
| 76 | const p = 'decode' in img ? img.decode() : Promise.resolve() |
| 77 | p.catch(() => {}).then(() => { |
| 78 | if (!img.parentElement || !img.isConnected) { |
| 79 | // Exit early in case of race condition: |
| 80 | // - onload() is called |
| 81 | // - decode() is called but incomplete |
| 82 | // - unmount is called |
| 83 | // - decode() completes |
| 84 | return |
| 85 | } |
| 86 | if (placeholder !== 'empty') { |
| 87 | setBlurComplete(true) |
| 88 | } |
| 89 | if (onLoadRef?.current) { |
| 90 | // Since we don't have the SyntheticEvent here, |
| 91 | // we must create one with the same shape. |
| 92 | // See https://reactjs.org/docs/events.html |
| 93 | const event = new Event('load') |
| 94 | Object.defineProperty(event, 'target', { writable: false, value: img }) |
| 95 | let prevented = false |
| 96 | let stopped = false |
| 97 | onLoadRef.current({ |
| 98 | ...event, |
| 99 | nativeEvent: event, |
| 100 | currentTarget: img, |
| 101 | target: img, |
| 102 | isDefaultPrevented: () => prevented, |
| 103 | isPropagationStopped: () => stopped, |
| 104 | persist: () => {}, |
| 105 | preventDefault: () => { |
| 106 | prevented = true |
| 107 | event.preventDefault() |
| 108 | }, |
| 109 | stopPropagation: () => { |
| 110 | stopped = true |
| 111 | event.stopPropagation() |
| 112 | }, |
| 113 | }) |
| 114 | } |
| 115 | if (onLoadingCompleteRef?.current) { |
| 116 | onLoadingCompleteRef.current(img) |
| 117 | } |
| 118 | if (process.env.NODE_ENV !== 'production') { |
| 119 | const origSrc = new URL(src, 'http://n').searchParams.get('url') || src |
no test coverage detected