feat: support setting rootMargin for client:visible

[forberg]

Changes

This support adding optional rootMargin to the IntersectionObserver options.

This gives the developer the optional choice to hydrate a bit before the astro-island enters the viewport.

<Component client:visible="200px" />

This is very useful for devices on slower connections, components with some useEffect changing DOM structure, to avoid CLS.

Testing

Tested by scrolling and seeing the hydration starts 200px before the island appears inscreen.

Docs

[changeset-bot]

🦋 Changeset detected

Latest commit: afd5eb3

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[3ddyBoi]

Heres a suggestion for documentation of this feature:

client:visible

• Priority: Low
• Useful for: Low-priority UI elements that are either far down the page ("below the fold") or so resource-intensive to load that you would prefer not to load them at all if the user never saw the element.

Load and hydrate the component JavaScript once the component has entered the user's viewport. This uses an IntersectionObserver internally to keep track of visibility.

<HeavyImageCarousel client:visible />

🆕 New Feature - Optional rootMargin: This feature allows for earlier component hydration in scenarios like slow internet connections or when components alter the page layout after loading. By setting a rootMargin, hydration is initiated when this specified margin around the component enters the viewport, rather than the component itself.

<HeavyImageCarousel client:visible="200px" />

Implementing a rootMargin, such as "200px", is beneficial for reducing layout shifts(CLS) and ensuring components are interactively ready sooner, enhancing the stability and responsiveness of the page.

[olekenneth]

I think the action fails because of it's missing a GH token when running from a fork

[lilnasy]

Would it be possible to implement this as a custom client directive?

https://docs.astro.build/en/reference/directives-reference/#custom-client-directives

[olekenneth]

Absolutely.

It's just that this is going to be useful for everyone using this directive. Some/most of the time it's better to have done the loading/hydration before the component comes into view.

[matthewp]

I like this change! A small quality of life improvement that doesn't impact maintainability, I think we should do it.

[bluwy]

We also need to update the docs at https://docs.astro.build/en/reference/directives-reference/#clientvisible

[3ddyBoi]

We also need to update the docs at docs.astro.build/en/reference/directives-reference/#clientvisible

I have opened a PR for the docs now 🎈

[sarah11918]

Thanks for this lovely addition to the client directive, @forberg ! I think people will really like this!

I've just left some thoughts on the changeset message. See what you think!

[sarah11918]

Docs is happy!