Suspense not waiting for async components using v-if

[robertmoura]

Version

3.2.26

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Click the button with "Start loading" on it and see that the fallback on suspense is not displayed.

What is expected?

The suspense fallback slot should be displayed while the async component is loading.

What is actually happening?

The suspense fallback slot is not being shown.

[lidlanca]

https://v3.vuejs.org/guide/migration/suspense.html#child-updates

<suspense>
 <asyncC1 v-if='toggle'>
 <asyncC2 v-else>

 <template #fallback>
        Loading... 
 </template>

</suspense>

sfc playground

[lidlanca]

in your example

you have a <div> wrapping the async component in the <child> component. the div being the root element of the <Child>.

if you remove that, it will possibly be more accurate repro.

however based on the docs

Once a <suspense> has resolved the contents of its default slot, it can only be triggered again if the default root node is replaced. New components nested deeper in the tree are not sufficient to move the back into a pending state.

The question is does the root node of is considered to be the root node of the default slot of suspense. or the <child> component itself. The latter seem to be the correct assumption.

[robertmoura]

Yeah, you hit the nail on the head there. Wrapping async components in a div stops it from returning into the pending state (sfc.vuejs.org/).

Are there any intensions to rework the spec to handle some of these cases? Vue warns me that it's experimental and subject to changes but I haven't heard of any movement on it for some time now. The developer experience would certainly be better if it could handled a few more of these edge cases.