Lazy.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = undefined;

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
}

function _objectWithoutProperties(obj, keys) {
  var target = {};
  for (var i in obj) {
    if (keys.indexOf(i) >= 0) continue;
    if (!Object.prototype.hasOwnProperty.call(obj, i))
      continue;
    target[i] = obj[i];
  }
  return target;
}

let Lazy = class Lazy extends _react2.default.Component {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.state = {}, _temp;
  }

  componentDidMount() {
    const { component } = this.props;
    component().then(Component => this.setState({
      Component
    }));
  }
  render() {
    const { Component } = this.state;
    const _props = this.props,
      { component } = _props,
      rest = _objectWithoutProperties(_props, [
        "component"
      ]);
    if (!Component) {
      return _react2.default.createElement(
        "span",
        null,
        "Please wait..."
      );
    }
    return _react2.default.createElement(Component, rest);
  }
};
exports.default = Lazy;

Lazy.lsc

import React from 'react';

type State = {
    Component?: React.Component
};

type Props = {
    component: () => Promise<React.Component>
};

export default class Lazy extends React.Component:
    state: State = {};
    props: Props;

    componentDidMount(): void ->
        { component } = this.props;
        component().then(Component => this.setState({
            Component
        }));

    render(): React.Element ->
        { Component } = this.state;
        { component, ...rest } = this.props;
        if !Component:
            return <span>Please wait...</span>;
        <Component  {...rest} />;