Code-splitting with import() and loading boundaries
- Supports any Promise based code-splitting API
import()
,require.ensure()
, etc - Display a custom loading component while waiting for sub-components to load.
- Handle timeouts and errors with a custom error component.
- Adds delay to prevent Flash of Loading Content
- Preload components with
preload
yarn add await-component
import {Await, Async, preload} from 'await-component';
import React from 'react';
import {Await, Async} from 'await-component';
const Container = Async(() => import('./Container'));
const Sum = Async(() => import('./Sum'));
export default () => (
<Await loading={<div>Loading...</div>} error={<div>ERROR!</div>}>
<Container>
<Sum a={1} b={2} />
<Sum a={2} b={2} />
<Sum a={5} b={5} />
</Container>
</Await>
);
import React from 'react';
import {Await, Async, preload} from 'await-component';
const Container = Async(() => import('./Container'));
const Sum = Async(() => import('./Sum'));
preload(Container);
export default () => (
<Await loading={<div>Loading...</div>} error={<div>ERROR!</div>}>
<Container>
<Sum a={1} b={2} />
<Sum a={2} b={2} />
<Sum a={5} b={5} />
</Container>
</Await>
);
/* @jsx Async.createElement */
import React from 'react';
import {Await, Async} from 'await-component';
const Container = import('./Container');
const Sum = import('./Sum');
export default () => (
<Await loading={<div>Loading...</div>} error={<div>ERROR!</div>}>
<Container>
<Sum a={1} b={2} />
<Sum a={2} b={2} />
<Sum a={5} b={5} />
</Container>
</Await>
);
See the Changelog
See the Contributors Guide