import React, {Component} from 'react';
import {inject} from 'mobx-react';

@inject('AppStore')
class LazyRoute extends Component {
  constructor(props) {
    super(props);
    this.state = { status: 'loading' };
    this.store = this.props.AppStore;
    this.store.setBusyState(true);
  }

  componentDidMount() {
    this.props.component.then((module) => {
      this.component = module.default;
      this.setState({ status: 'loaded' });
      this.store.setBusyState(false);
    })
  }

  render() {
    const {status} = this.state;
    const {loading} = this.props;
    if (status === 'loaded') {
      return <this.component {...this.props} />
    } else if (loading) {
      return <loading/>
    }
  }
}

export default LazyRoute;