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

Add how to use a fallback slot with client:only #8805

Closed
sarah11918 opened this issue Jul 15, 2024 · 0 comments · Fixed by #9516
Closed

Add how to use a fallback slot with client:only #8805

sarah11918 opened this issue Jul 15, 2024 · 0 comments · Fixed by #9516
Labels
add new content Document something that is not in docs. May require testing, confirmation, or affect other pages. good first issue Good for newcomers help wanted Issues looking for someone to run with them!

Comments

@sarah11918
Copy link
Member

sarah11918 commented Jul 15, 2024

📚 Subject area/topic

UI framework islands

📋 Suggested page

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

📋 General description or bullet points (if proposing new content)

After the existing codeblock showing all the frameworks individually, show how to create fallback content to show while a client:only island is loading. I suggest adding something like:

#### Display loading content

For components that render only on the client, it is also possible to display fallback content while they are loading. Use `slot="fallback"` on any child element to create content that will be displayed only until your client component is available:

``` title="src/pages/index.astro" {2}
<ClientComponent client:only="vue">
  <div slot="fallback">Loading</div>
</ClientComponent>
```

Would accept a PR to the directives-reference page adding this!

@sarah11918 sarah11918 added the add new content Document something that is not in docs. May require testing, confirmation, or affect other pages. label Jul 15, 2024
@sarah11918 sarah11918 added good first issue Good for newcomers help wanted Issues looking for someone to run with them! labels Sep 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
add new content Document something that is not in docs. May require testing, confirmation, or affect other pages. good first issue Good for newcomers help wanted Issues looking for someone to run with them!
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant