Support rootMargin on intersectionObserver

[ScriptedAlchemy]

Some components can load in a janky fashion if they are hydrated when directly in view.

Id like to propose the ability to add a rootMargin, allowing a component to hydrate itself before a user is fully viewing it.

Use case:

• carousels where additional computation is required after mounting
• components that use fade-in effects or lazyloading images does not have a smooth experience
• components that use intersection observer themselves

Reasoning

Would provide a better UX

[hadeeb]

This is interesting.

I am not that familiar with intersection observers to think of a possible solution. Interested to know if you have anything cooking up.

Also, I feel it might be a bit difficult to add more configuration to the component in it's current form.

[ScriptedAlchemy]

I can open a PR and just hard code a default margin of like 100px if that’s okay.

[hadeeb]

Yes, that would be awesome.

[ScriptedAlchemy]

PR open, I'm also open to helping you maintain this project if you're interested. It works better than any of the others out there. Might throw a few more PR's your way

[hadeeb]

@ScriptedAlchemy I have added you as a collaborator.

[ScriptedAlchemy]

@hadeeb i see you merged my PR, can you push the latest to NPM?

[szepgergo]

Hello,
Just saw the PR and was wondering... would it be possible to expose the rootMargin as an optional property with the default of '250px' instead of just hardcoding it in the module? Thank you

[szepgergo]

I've tried to make it myself. Please note, I'm not very familiar with TS: #29