twobin / react-lazyload

Lazy load your component, image or anything matters the performance.
MIT License
5.85k stars 487 forks source link

Multiple components all triggering at once when styled placeholder collapses #357

Open dungle-scrubs opened 3 years ago

dungle-scrubs commented 3 years ago

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