Suspense regression when toggling an async component in rc.12

[cexbrayat]

Version

3.0.0-rc.12

Reproduction link

https://jsfiddle.net/v0onkyej/

Steps to reproduce

This is based on a comment I added on #3132 but I'm afraid it went unnoticed.
Just to make sure we are not missing anything.

Consider:

<button @click="toggled = !toggled">Toggle {{ toggled }}</button>
<Suspense>
  <div v-if="toggled">
    <hello />
  </div>
  <template #fallback>Loading...</template>
</Suspense>

What is expected?

In rc.10, the Loading indicator is displayed.

What is actually happening?

In rc.12, the Loading indicator is not displayed.

[leopiccionia]

According to #2099, it's an intended change.

By default, the current active tree will stay on the screen until the pending tree is resolved. The pending tree, when resolved, replaces the previous active tree and becomes the new active tree.

A timeout prop can be specified - if a pending tree remains pending past the timeout threshold, the active tree will be unmounted and be replaced by the fallback tree.

If <Suspense> is replaced by <Suspense timeout="0">, for example, the loading... message appears as soon as possible.

It happens because toggled initial value is false, so suspense resolves immediately.

[cexbrayat]

@leopiccionia 👍 I agree, but it's weird to have the fallback tree on first load (if toggled is true), right away (depite having a timeout or not) and not on the following toggles without timeout. If that's expected, I don't mind closing it, but I'd like a confirmation. I personally think it was more intuitive previously and was afraid this behavior was not really intended.

[yyx990803]

@leopiccionia 's interpretation is correct. However, I agree this is still open to discussion. Maybe we should default the timeout to 0 which encourages users to always set a timeout.

[Ydot19]

I think setting a timeout to encourage users is the better alternative because it gives more clarity about the code should behave