React loadable helper function

example.js

import loadable from './loadable';

const AsyncComponent = loadable(import('./my-component'));

loadable.js

import Loadable from 'react-loadable';
import React from 'react';
import Loading from './loading';

const loadable = (loader, render) => {
  if (!render) {
    // eslint-disable-next-line
    render = (Loaded, props) => {
      return <Loaded.default {...props} />;
    };
  }
  return Loadable({
    loader: () => loader,
    render,
    loading: Loading,
    delay: 300,
    timeout: 10000
  });
};
export default loadable;

loading.js

import React from 'react';
import PropTypes from 'prop-types';

const Loading = props => {
  if (props.error) {
    return <div>Error!</div>;
  } else if (props.timedOut) {
    return <div>Taking a long time</div>;
  } else if (props.pastDelay) {
    return <div>Loading ...</div>;
  }
  return null;
};
Loading.propTypes = {
  error: PropTypes.object,
  timedOut: PropTypes.bool,
  pastDelay: PropTypes.bool
};
Loading.defaultProps = {
  error: null,
  timedOut: false,
  pastDelay: false
};

export default Loading;