Suspense top-level property

ReactJsComponentFactoryProxy Suspense
getter/setter pair

Suspense lets you display a fallback UI until its children have finished loading.

Like Fragment, Suspense does not render any visible UI. It lets you specify a loading indicator in case some components in the tree below it are not yet ready to render. Suspense currently works with:

  • Components that use React.lazy
    • (dynamic imports, not currently implemented in dart)

Example Usage:

render() {
  return react.div({}, [
    Header({}),
    react.Suspense({'fallback': LoadingIndicator({})}, [
      LazyBodyComponent({}),
      NotALazyComponent({})
    ]),
    Footer({}),
  ]);
}

In the above example, Suspense will display the LoadingIndicator until LazyBodyComponent is loaded. It will not display for Header or Footer.

However, any "lazy" descendant components in LazyBodyComponent and NotALazyComponent will trigger the closest ancestor Suspense.

See: react.dev/reference/react/Suspense

Implementation

var Suspense = ReactJsComponentFactoryProxy(React.Suspense);