loadable.ts

import * as  React from 'react';
import { RouteComponentProps } from 'react-router-dom';

interface LoadableProps<T> {
    loader: (props: RouteComponentProps<T>) => (() => Promise<React.ComponentType<T>> | React.ComponentType<T>);
    loading: React.ComponentType<T>;
}
export function Loadable<T>(loadableProps: LoadableProps<T>) {

    return class LoadableComponent extends React.Component<RouteComponentProps<T>, { ResultComponent: React.ComponentType<T> }> {
        state = { ResultComponent: null as any };

        async componentWillMount() {
            console.log('componentWillMount')
            const loaderResult = loadableProps.loader(this.props);
            if (typeof loaderResult === 'function') {
                this.setState({ ResultComponent: await loaderResult() });
            } else {
                this.setState({ ResultComponent: loaderResult });
            }
        }

        render() {
            if (this.state.ResultComponent) {
                return <this.state.ResultComponent />
            }
            return <loadableProps.loading />
        }
    }
}

loading.tsx

import * as React from 'react';
import { LoadingComponentProps } from 'react-loadable';

/**
 * Loading component. Renders a div with loading message
 */
export const Loading: React.StatelessComponent<LoadingComponentProps> = ({ isLoading, error, timedOut }) => {
    if (timedOut) {
        return (<div>Still loading...</div>);
    }

    if (error) {
        const errorMessage = process.env.NODE_ENV === 'development' ? <pre>{String(error)}</pre> : null;
        return (<div><p>Something went wrong...</p>{errorMessage}</div>)
    }

    return (<div>Loading...</div>);
};