Dynamic Import Component

lazyComponent.js

import React, { Component } from 'react'
import { SyncLoader } from 'react-spinners'

const lazyComponent = (importComponent) => class extends Component {
  constructor(props) {
    super(props)

    this.state = {
      component: null
    }
  }

  componentDidMount() {
    importComponent()
      .then((cmp) => this.setState({ component: cmp.default }))
  }

  render() {
    const Lazy = this.state.component

    const loaderStyles = {
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      width: '100%',
      height: '100%'
    }

    return Lazy ?
      <Lazy {...this.props} />
      :
      <div style={loaderStyles}>
        <SyncLoader
          sizeUnit="px"
          size={10}
          color="#2065bf"
          loading
        />
      </div>
  }
}

export default lazyComponent