Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
dungle-scrubs opened this issue Jul 26, 2021 · 0 comments

Comments

@dungle-scrubs
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant