Replies: 5 comments
-
This is exactly what I want. If you have some client:only components, but are on a slow connection, it can take a little while to download the associated js file from the server, before the component actually renders. It would be great to be able to add some server-rendered fallback, like a spinner for example, to show to the user that the island is loading... |
Beta Was this translation helpful? Give feedback.
-
+1 for this Perhaps the API could look something like this: ---
import { Fallback } from 'astro'
import MyIsland from './MyIsland.vue'
---
<Fallback>
<MyIsland client:only="vue" />
<p>Please wait...</p>
</Fallback> |
Beta Was this translation helpful? Give feedback.
-
I think this discussion just wasn't updated, this is currently possible: ---
import { Fallback } from 'astro'
import MyIsland from './MyIsland.vue'
---
<MyIsland client:only="vue">
<Fragment slot="fallback">
<p>Please wait...</p>
</Fragment/
</MyIsland> Here is an example on StackBlitz using Preact: https://stackblitz.com/edit/github-vb458n?file=src%2Fpages%2Findex.astro |
Beta Was this translation helpful? Give feedback.
-
Thank you! ❤️ Let's close the issue. |
Beta Was this translation helpful? Give feedback.
-
FYI addition to docs is being tracked at withastro/docs#8805 |
Beta Was this translation helpful? Give feedback.
-
Is it possible to set a fallback for components that are
client:only
?E.g.,
I think it could be helpful to show an indicator in place when the page is still loading islands.
Beta Was this translation helpful? Give feedback.
All reactions