Error fallback image with loadEagerly?

I need an image that should be rendered asap (I’m using SSR with next.js), and currently I’m using the loadEagerly prop in this image… However, I found interesting that if for some reason this image doesn’t exist, display the fallback image… Looks that with loadEagerly is only rendering the actual.

There is some another option to do it?

[fpapado]

I think the workaround that you mention with onError is the best way to handle loadEagerly + error handling at the moment.

The second scenario with loadEagerly={!process.browser} will have quirks, because the image will be re-rendered when the client sripts rehydrate. This is why you get the “blinking” behaviour even if there is no error - it’s the image entering the “Loading” state again.

The reason the workaround only works sometimes, as far as I can tell, is that the event could fire before the client scripts have downloaded/parsed/executed. I don’t think it’s Next.js specific, but rather how hydration and events work. I could be wrong though!

A potential solution

This discussion does give me an idea:

• If the image has loadEagerly, then we move to a new state, Refreshing
• In that Referesing state, we would keep rendering the actual, and also kick off an observed image load
• When the new image comes in, or fails, we move to Loaded or Error states, as before

In theory, this means:

• If the image has been fetched by the browser already, then it’s in cache, and there should be no blinking (no Loading state) when we “swap”
• If the image was broken, and the new load is broken, then error is used

I have some free time over the next few days, and was looking into tackling some leftover issues here. I’ll let you know if I manage to get a beta version out. No guarantees that it’ll work, but we can try it and get some feedback 😃

[aralroca]

Better detailed:

hook:

import { useRef, useCallback, useEffect } from 'react'
import noop from 'lodash/noop'

/**
 * Using loadEagerly, with SSR the image is displayed ASAP,
 * in the first render.
 *
 * With loadEagerly activated, the "error" prop of LazyImage
 * component is not rendering. So, in order to workaround the fallback image,
 * I need to do two things:
 *
 * * Catch the event onError and change the src with the fallback image
 * * Check in the "didMount" (useEffect) that if is completed and doesn't
 *   have height, this means that there is an error, and how is completed
 *   before the hydration, the onError event was not fired by React. So in
 *   this case also the src shoud be changed to the fallback image.
 */
export default function useLoadEagerlyFallbackImage(fallbackSrc) {
  const ref = useRef(null)

  /**
   * Error happened / catched after hydration
   */
  const onError = useCallback(
    e => { e.target.src = fallbackSrc }, [fallbackSrc],
  )

  /**
   * Error happened before hydration, but catched after hydration
   */
  useEffect(() => {
    if (ref && ref.current) {
      const { complete, naturalHeight } = ref.current
      const errorLoadingImgBeforeHydration = complete && naturalHeight === 0

      if (errorLoadingImgBeforeHydration) {
        ref.current.src = fallbackSrc
      }
    }
  }, [fallbackSrc])

  return { ref, onError }
}

Usage:

const loadEagerlyProps = useLoadEagerlyFallbackImage(fallbackSrc)

return (
  <LazyImage
    loadEagerly
    src={src}
    alt=""
    actual={({ imageProps }) => (
     <img {...imageProps} {...loadEagerlyProps} />
     )}
  />
)