Create an async component that returns props.children during loading

async-component.js

import React from 'react';

// async-component.js
export default ({ resolve }) => class AsyncComponent extends React.Component {
  state = { Component: undefined };
  
  componentDidMount() {
    resolve().then(Component => {
      this.setState({ Component });
    });
  }

  render() {
    if (this.state.Component) {
      return (
        <Component {...this.props}>
          {this.props.children}
        </Component>
    }
        
    return this.props.children;
  }
}

// component.js
export default (props) => <div>{props.children}</div>;
        
// usage.js
import Component from './component.js';
import createAsyncComponent from './async-component.js';

const AsyncComponent = createAsyncComponent({ resolve: () => import('./async-component.js').then(module => module.default) });
      
export default () => (
  <AsyncComponent>
    this text will be shown regardless of async component being loaded or not
  </AsyncComponent>
);