Multiple components all triggering at once when styled placeholder collapses

This issue has been tracked since 2021-07-26.

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

More Details About Repo
Owner Name twobin
Repo Name react-lazyload
Full Name twobin/react-lazyload
Language JavaScript
Created Date 2015-08-07
Updated Date 2022-11-29
Star Count 5639
Watcher Count 52
Fork Count 482
Issue Count 153

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date