What problem does this feature solve?

I am working with the Suspense component and it works great, but my issue at the moment, is most of my components are async (router views that is), and therefore for every page load, it flashes the screen to the loading component, then comes back to the new page, this is usually on the page for less than 20ms, so you can't even read it.

I think really it should work similar to defineAsyncComponent where you can define a delay before the loading component shows, and then even better would be to offer a error component as well.

I am not too fussed about the way the API looks for it realistically, but I think the functionality should be there, even if it was a global value defined when creating a Vue instance, but for the best configurability it's best to be applied to the suspense component.

What does the proposed API look like?

Something along the lines of the below:

<RouterView v-slot="{ Component }" :key="$route.fullPath">
    <template v-if="Component">
        <Suspense>
            <component :is="Component" />

            <!-- Loading Component -->
            <template #fallback>
                <LoadingComponent />
            </template>

            <!-- Error Component -->
            <template #failed>
                <ErrorComponent />
            </template>
        </Suspense>
    </template>
</RouterView>

Closed because I am blind and saw the timeout option, (hard to see in a wall of text...). Keeping open though as the error component portion would be super useful.

Nevermind, timeout doesn't work, tried with:

<Suspense timeout="5000">

and

<Suspense :timeout="5000">