Allow nested Suspense components to interact

[cabal95]

What problem does this feature solve?

We have some components that wrap their inner content in a Suspense component to provide a better UI. When these components are placed on an Edit page this works great. Meaning, user clicks Edit and the new "edit UI" is shown with a spinner in the one section that is being loaded asynchronously.

However, at other times these components are used in the "view UI", that is on initial page load. In those cases we want to delay showing the entire page until everything is ready. To do that, we put a Suspense component at the top of the DOM that contains the entire page. So we end up with something akin to:

<Suspense>
  <h1>Page Header</h1>
  <div>other content and components</div>
  <CustomComponent>
    <Suspense>
      ...
    </Suspense>
  </CustomComponent>
</Suspense>

The problem is that is seems Suspense events do not cross Suspense Boundaries. Meaning, the Suspense component inside CustomComponent seems to swallow the pending/resolved events so they do not propagate up to the root Suspense component. We would love an option to be added to Suspense that allows it to propagate those events to the parent boundary so that the top-level Suspense can keep the content hidden until all descendant components are fully loaded.

We have considered building our own custom Suspense component, and we could likely achieve most functionality for this via defineAsyncComponent (or rather, an overload of it). But we don't see any way to capture async setup() without getting into the internals of Vue.

If this is not a feature that would be up for considering, we can pursue the custom component, but since it wouldn't give us all the features we want it wouldn't be ideal.

What does the proposed API look like?

I think it would make sense for the parent Suspense component to be in charge of deciding if it waits for descendant Suspense components as well. So something like:

<Suspense :includeDescendantBoundaries="true">
  <h1>Page Header</h1>
  <div>other content and components</div>
  <CustomComponent>
    <Suspense>
      ...
    </Suspense>
  </CustomComponent>
</Suspense>

[ferferga]

@sodatea I think this issue can be closed now? Isn't this what suspensible already does? See #6736

There's no mention about it in the docs though, maybe I'll open a PR there.

[sodatea]

Yeah, you are right. Thanks for the reminder!