Constant flicker on broken image

[zspitz]

Describe the bug
If any of the images higher up in the column are broken, the rest of the column starts flickering

To Reproduce
Sandbox here: https://codesandbox.io/p/sandbox/sparkling-cache-3cpp8v

(I'm not sure why some of the images are broken, but that seems to be a separate issue.)

Expected behavior
No flicker.

Screenshots

(Note that when live the column continues to flicker; it's only the GIF which has come to an end.)

Desktop:

• OS: Windows
• Browser Firefox/Chrome
• Version Firefox 130.0.1 / Chrome 129.0.6668.59 / Masonic 4.0.1

Smartphone:

(not tested)

Additional context

This doesn't happen with the basic Masonry component, only with MasonryScroll.

AFAICT the initial measurement doesn't take into account the height of the broken image placeholder inserted by the browser. When the browser gets around to inserting the placeholder, that triggers a React re-render; in which the measurement again doesn't include the height of the placeholder.

Setting alt to an empty or short string stops the flickering, presumably because the browser doesn't render the placeholder (other methods for doing the same thing might also work):

If there are no broken images in the initial viewport, scrolling down until a broken image comes into view triggers the flicker.

Moving to a different browser tab or a different window and then back, stops the flicker.