Next/image blurPlaceholder skipped on virtualizer update

[mcgrealife]

Using nextJS Image component with placeholder='blur' and a blurDataUrl of base64.

Both examples have cache disabled and a throttled network for exaggeration

Expected behavior: (mapping over data with JSX)

Blur placeholder base64 image shown on component mount and on list update (when dragging the map)

mapping.data.to.jsx.expected.blur.behavior.mp4

Problem behavior: Virtualization skips blurPlaceholder, somehow showing old image until new image loads.

The blurPlaceholder is shown on react-virtual mount, but on list update: the old image is shown until the new image has loaded (skipping blurPlaceholder).

The blurPlaceholder base64 data is included in the same json as the text – available immediately (it's not a remote url).

react-virtual.mp4

Virtualization questions:

• Does virtualization have some effect on the HTML loading complete attribute?
• Is virtualization memoizing the component somehow?
  • How is the old image even shown in a new component? (wouldn't the old image be discarded?). In both examples, browser cache was disabled. (though the problem remains with cache enabled too).
  • I've also tried setting react-virtual overscan to 0 (thinking it could be pre-fetching components), with no success.
  • react-virtual does not seem to be re-using components either, confirmed by a console.log() in each component's onMount useEffect lifecycle

I've tried many combinations of next versions, next/image (future and legacy), next/image props, and browsers.
Interestingly, the same thing happens in react-virtuoso. (But not when removing virtualization, and simply mapping my data into jsx).

Maybe I would find more answers in the nextjs discussions. But maybe someone here has insights on which parts of virtualization could be affecting the image component. Many thanks.

[mcgrealife]

Google mentions a good technique for virtualization is "dom-recycling". Maybe this is how react-virtual is reusing components, and showing the old card image until the new card image loads. (Which somehow does not trigger the Next/Image component to show its blurPlaceholder value).

Edit: asked in NextJS discussions

[piecyk]

Hmm, is the key value the default one? if so, then pretty no way it's reusing anything as it's the index of element in array. Hard to say what is happening without minimal, reproducible example 🤔