loadable.md

loadable()

loadable() is a higher-order-component that creates a component which waits for a promise to resolve before rendering its returned component.

const LoaderComponent = loadable({
  loader: () => new Promise((resolve) => resolve(Component))
});

<LoaderComponent />

LoaderComponent.load();

The code above will render Component component when the promise resolves. loadable() creates a mock() component whose implementation is loaded using .load() method is called, instead of explicitly setting it by .implement().

To start promise resolution, you have to call .load() method. This function still requires you to explicitly call .load() method, instead you might be interested in lazy() or delayed functions, which call the .load() method automatically for you.

Example

Create a loadable React component and immediately load it.

import {loadable} from 'libreact/lib/loadable';

// Here we assume it is exported as default exports.
const loader = () => import('./path/to/image.svg');

const SVGImage = loadable({
  loader
});

<SVGImage />

SVGImage.load();

If your component is not exported as default exports, you need to "return" it.

const LoadableComp = loadable({
  loader: () => import('./MyComp').then(module => module.MyComp)
});

You can specify a component to be displayed while loading.

const AppLoadable = loadable({
  loader: () => import('./MyApp'),
  loading: 'Loading...',
});

or

const AppLoadable = loadable({
  loader: () => import('./MyApp'),
  loading: AppLoadingSpinner,
});

Also, you can specify a component to be displayed on error.

const AppLoadable = loadable({
  loader: () => import('./MyApp'),
  error: (error) => {
    console.error('Error happened while loading', error);
    return AppLoadingErrorComponent;
  },
});