AsyncComponent.jsx

AsyncComponent.jsx

import * as React from 'react';
import {IAsyncComponentState} from 'types';

export function asyncComponentLoader(callback: Function) {
    return class extends React.Component<{}, IAsyncComponentState> {
        // initial component state
        public state: IAsyncComponentState = {
            component: null,
        };

        /**
         * Invoked immediately after a component is mounted
         *
         * @return {void}
         */
        async componentDidMount() {
            const {default: component} = await callback();

            this.setState({
                component,
            });
        }

        /**
         * Render current component
         *
         * @return {JSX.Element}
         */
        render() {
            const {component: Component} = this.state;

            return Component
                ? <Component {...this.props} />
                : null;
        }
    };
}

export default asyncComponentLoader;