Skip to content

feat: support setting rootMargin for client:visible#9363

Merged
ematipico merged 8 commits intowithastro:mainfrom
forberg:patch-1
Jan 3, 2024
Merged

feat: support setting rootMargin for client:visible#9363
ematipico merged 8 commits intowithastro:mainfrom
forberg:patch-1

Conversation

@forberg
Copy link
Copy Markdown
Contributor

@forberg forberg commented Dec 7, 2023 •
edited
Loading

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

@forberg
feat: support setting rootMargin for client:visible
693e75f 
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.
@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Dec 7, 2023 •
edited
Loading

🦋 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

@github-actions github-actions bot added the pkg: astro Related to the core `astro` package (scope) label Dec 7, 2023
@github-actions github-actions bot added the pr: docs A PR that includes documentation for review label Dec 7, 2023
@3ddyBoi
Copy link
Copy Markdown

3ddyBoi commented Dec 7, 2023

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
Copy link
Copy Markdown

olekenneth commented Dec 8, 2023

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

@lilnasy
Copy link
Copy Markdown
Contributor

lilnasy commented Dec 15, 2023

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

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

@olekenneth
Copy link
Copy Markdown

olekenneth commented Dec 15, 2023

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
matthewp reviewed Dec 27, 2023
View reviewed changes
matthewp
matthewp approved these changes Dec 27, 2023
View reviewed changes
Copy link
Copy Markdown
Contributor

@matthewp matthewp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

olekenneth
olekenneth reviewed Dec 27, 2023
View reviewed changes
@bluwy
Copy link
Copy Markdown
Member

bluwy commented Dec 29, 2023

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

@bluwy bluwy added the semver: minor Change triggers a `minor` release label Dec 29, 2023
3ddyBoi added a commit to 3ddyBoi/docs-1 that referenced this pull request Jan 2, 2024
@3ddyBoi
Update directives-reference.mdx with optional root margin
8dbac81 
Documentation for optional root margin on client visible.
This documents this pr withastro/astro#9363
@3ddyBoi 3ddyBoi mentioned this pull request Jan 2, 2024
Merged
@3ddyBoi
Copy link
Copy Markdown

3ddyBoi commented Jan 2, 2024

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
sarah11918 reviewed Jan 2, 2024
View reviewed changes
Copy link
Copy Markdown
Member

@sarah11918 sarah11918 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

@Princesseuh Princesseuh added this to the 4.1.0 milestone Jan 2, 2024
@forberg @sarah11918
fix: update .changeset/stupid-peas-juggle.md
afd5eb3 
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
sarah11918
sarah11918 approved these changes Jan 2, 2024
View reviewed changes
Copy link
Copy Markdown
Member

@sarah11918 sarah11918 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Docs is happy!

@ematipico ematipico merged commit 769826e into withastro:main Jan 3, 2024
@astrobot-houston astrobot-houston mentioned this pull request Jan 3, 2024
Merged
Princesseuh added a commit that referenced this pull request Jan 3, 2024
@Princesseuh
Revert "feat: support setting rootMargin for client:visible (#9363)"
e828cd0 
This reverts commit 769826e.
@Princesseuh Princesseuh mentioned this pull request Jan 3, 2024
Merged
Princesseuh added a commit that referenced this pull request Jan 4, 2024
@Princesseuh @natemoo-re
feat: update extended client:visible to use an object instead of a st…
fbc2697 
…ring (#9596)

* Revert "feat: support setting rootMargin for `client:visible` (#9363)"

This reverts commit 769826e.

* feat: update extended `client:visible` to use an object instead of a string

* Apply suggestions from code review

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* test: add a test

* nit: comment

* test: write the test some other way to try to convince playwright

---------

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@matthewp matthewp matthewp approved these changes

@ematipico ematipico ematipico approved these changes

@sarah11918 sarah11918 sarah11918 approved these changes

+2 more reviewers

@olekenneth olekenneth olekenneth left review comments

@bluwy bluwy bluwy approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

pkg: astro Related to the core `astro` package (scope) pr: docs A PR that includes documentation for review semver: minor Change triggers a `minor` release

Projects

None yet

Milestone

4.1.0

Development

Successfully merging this pull request may close these issues.

10 participants

@forberg @3ddyBoi @olekenneth @lilnasy @bluwy @matthewp @ematipico @sarah11918 @Princesseuh @florian-lefebvre