Make lazy loaded components compatible with Vue Suspense API

[jnoordsij]

What problem is this solving

Per the current docs:

Vue Router has built-in support for lazily loading components using dynamic imports. These are distinct from async components and currently they will not trigger <Suspense>. However, they can still have async components as descendants and those can trigger <Suspense> in the usual way.

It would be nice to have such components to do work with Suspense, as currently I could find no trivial way to easily track the loading state of lazy component in a manner visible to users. The best solution I've seen around so far involved route guards to alter some global loading state ref, but this feels somewhat complex to me.

Documentation above suggests attempts to achieve compatibility have been made or are at least planned ("and currently they will not"), however I could find no issue tracking progress on this.

Proposed solution

When using a RouterView component within Suspense and (lazy) loading of a route component start, it works in such a manner that the Loading State of the Suspense is triggered.

Describe alternatives you've considered

Use workarounds like #1469 (comment).

Final note

As mentioned, I've created this as the docs seem to suggest this may be possible and/or already considered. If this is considered to be technically infeasible, I suggest to reword the docs to make users aware this will never happen. If there's already some other place tracking progress on this that I haven't found, feel free to close this and lead me that way!

[posva]

This already works. Maybe you have a specific usage question. In that case, open a discussion please. The bottom line is that dynamic imports allow vue router to integrate the fetching of the chunk into the navigation while using a dynamic component with suspense will move the fetching to Suspense.

The best solution I've seen around so far involved route guards to alter some global loading state ref, but this feels somewhat complex to me.

You can see the example in the issue you mentioned #1469 in the last comemnt

[jnoordsij]

Hey there! Thanks for looking into this. However, I think my initial issue description may have not been clear enough. I created this issue specifically to track the part that currently is not compatible: lazy loading a component and have Suspense display the loading state in the meantime. This currently does not work and is explicitly mentioned as not working in the docs.

The main reason I created this is the phrasing in the docs: "These are distinct from async components and currently they will not trigger <Suspense>." This seems to suggest that at least some efforts are being made or at least planned to make this work. If this is not the case, which is also perfectly fine, then rewording this (and possibly explicitly mentioning workarounds like #1469 (comment)) seems like the right thing to do to me?