Version

3.2.26

Reproduction link

sfc.vuejs.org/

Steps to reproduce

1. Wrap the suspense component using slots
2. Use the wrapped suspense component (WSC) to suspend an async root node
3. Destroy the root node and replace it with a new async root node

What is expected?

The old root node should stay until the new root node is loaded.

What is actually happening?

The old root node is destroyed, before the new root node is loaded.

I wanted to wrap the suspense component to have a default loading / error handling behavior. Which is probably a common thing to do when you are using suspense.

Workaround:

<Suspense>
    <template #default>     
        <component :is="$slots.default?.()[0]" />
    </template>
    <template #fallback>
      <slot name="fallback"> Default Loading Message... </slot>
    </template>
  </Suspense>

same as #5102 #5273

Once a 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.

Not really. In this issue here, there is only one component root node in the default slot, and it is being replaced. It's just that the default slot containing that single root node is being passed through from a parent to Suspense.

The problem as it seems to me is that the compiler has wrapped it in a Fragment, and Suspense fails to deal with that, maybe because it's a stable fragment?

Absolutely not sure, but as you can see from my workaround, manually pulling that single root node out of the fragment returned by the slot makes it work.

@LinusBorg You are right. I'm trying to say : maybe, it would be better to let Suspense back into the pending status when the default slot re-render.