react-lazyload icon indicating copy to clipboard operation
react-lazyload copied to clipboard

Multiple components all triggering at once when styled placeholder collapses

Open dungle-scrubs opened this issue 3 years ago • 0 comments

Awesome library, it works really well with Gatsby + Loadable Component. I might not be using correctly though.

Let's say you have a series of 10 sections, each with a placeholder whose height is set via CSS. When you get to the first one, there's a split second where the placeholder disappears before the final component renders, so the next section technically touches viewport. During this moment, like a domino effect, all sections down the page collapse so all are triggered simultaneously (so the scroll bar makes a couple of big jumps).

I'm using CSS, rather than the height prop, because each section's height can vary significantly from mobile to desktop. Ideally I'd like each lazy section to be fetched staggered, as you arrive to each one's scroll position.

Is there another suggested pattern to use so that the height can be maintained, and doesn't collapse to zero, during the final render?

Thanks

dungle-scrubs avatar Jul 26 '21 05:07 dungle-scrubs