Add load and error events for server compoments

[marccremer]

Describe the feature

At the moment there is no real way to display a loading state while a server component is getting fetched.
We basically have 2 options.

1. Intercept fetch request with a worker and check if it is the relevant url
2. Add some global state and modify it inside the server component when it reaches the browser

Both of these solutions have issues.

I suggest we add an event on document and let the user do something like

if (!process.server) {
  document.addEventListener('island:loaded', (e) => {
    console.log(e)
    loading.value = false
  })
}

I made a small patch as PoC https://github.com/marccremer/nuxt_islands_issue/blob/loading_island_events/.yarn/patches/nuxt-npm-3.10.0-f38f448dd9.patch

I am looking for feedback on the shape of the event and location in the life cycle.
Additionally I think we should add an error event later on

Additional information

• Would you be willing to help implement this feature?
• Could this feature be implemented as a module?

Final checks

• Read the contribution guide.
• Check existing discussions and issues.

[huang-julien]

I don't think we should rely on document to pass event or any global state.

How about exposing a ref() through expose() ? We can also allow passing a loading slot

[marccremer]

I didn't know expose was a thing and adding an additional slot seemed to complex for me,
as it would be inside the server component, but behave completely different and only be relevant in the browser.
The #fallback slot already does loading for lazy server components. What is needed is a loading state for when props change.

Is there a good reason not to use document ? The event would only ever fire when there is a document.

[huang-julien]

My personal opinion is that that kind of event should be limited to a vue application or at a component level and not to the whole document context. You'd also have to remove the listener when the component is unmounted or you'll have a memory leak.

If you want to use events, we can use emit() or we can exposing the current loading state of an island by exposing a Ref with expose().

@danielroe any thoughts ?

[marccremer]

I am using something like this at work https://stackblitz.com/~/github.com/marccremer/nuxt_islands_issue/tree/loading_island_events
and have not had any issues with it yet.

I want to keep the event driven messaging.
It works well for loading and error states. I just choose the document as it was the simplest, but I would love it if there was something like nuxtApp.shared , where I could register the listeners

[huang-julien]

What I mean is that this loading state is only related to a single component instance -> the island. And each island have their own loading state. expose() and component events are made for that.

We do have hooks on nuxt, yet I don't think this is a good idea to allow islands to use hooks, especially for loading state. This isn't like the nuxt loading indicator which is something more global in the nuxt application context.

I think we should start with by exposing a loading state ref() from nuxt island and then it will be up to users to create their own wrapper around nuxt-island if they want to use an event bus. 🙂