async-components.md

Loading components with loadable-components

loadable-components is integrated into react-boilerplate because of its rich functionality and good design (it does not conflate routes with asynchronous components).

To load a component asynchronously, create a Loadable file by hand or via component/container generators with the 'Do you want to load resources asynchronously?' option activated.

This is the content of the file by default:

import loadable from 'loadable-components';

export default loadable(() => import('./index'));

In this case, the app won't show anything while loading your component. You can however make it display a custom loader with:

import loadable from 'loadable-components';

export default loadable(() => import('./Home'), {
  LoadingComponent: () => <div>Loading...</div>,
})

loadable-components also allows you to do prefetching, loading multiple components in parallel, handling loading errors and plenty more.

You can find more information on how to use loadable-components in their docs.