Usage with HOC loading

Just a tip on how to use this library together with a HOC-loader like redux-connect:

// Your wrapped component
const MyAsyncComponent = loadable(() => import('./MyAsyncComponent/MyAsyncComponent'))

// Utility to extract the wrapped component if loadable-HOC will conflict with your other HOCs
const loadableWrapper = (cb, LoadableComponent) => {
  LoadableComponent.load().then((Comp) => {
    cb(null, Comp)
  }).catch((error) => {
    console.log('Error loading', error)
  })
}

<Route path='/some-path' getComponent={(nextState, cb) => loadableWrapper(cb, MyAsyncComponent)} />

[gerhardsletten]

Later discovered that for SSR intial render we need to extract loadable-id and set a loadable key on the loaded component. If not the component would not be included in the script-tag, and you will have a flicker with nothing on the screen after intial SSR render while client-side is taking over. I use Preact and Preact-compat in production and it works fine now.

// Your wrapped component
const MyAsyncComponent = loadable(() => import('./MyAsyncComponent/MyAsyncComponent'))

// In your router-file
import { LOADABLE } from 'loadable-components/constants'

// Utility to extract the wrapped component if loadable-HOC will conflict with your other HOCs
const loadableWrapper = (cb, LoadableComponent) => {
  LoadableComponent.load().then((Comp) => {
    // Add LOADABLE-key and loadable-componentId to the component you send back to react-router (v3)
    Comp[LOADABLE] = () => LoadableComponent
    Comp.componentId = LoadableComponent.componentId
    cb(null, Comp)
  }).catch((error) => {
    console.log('Error loading', error)
  })
}

<Route path='/some-path' getComponent={(nextState, cb) => loadableWrapper(cb, MyAsyncComponent)} />

[gerhardsletten]

The above code is with react-router v3, but with react-router v4 (and redux-connect) combining both the async Hoc and make the container lazyload is not possible. You need to re-organize your code having the Hoc above, and inside it lazyload the View with all heavy dendencies, like this:

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { asyncConnect } from 'redux-connect'
import loadable from '@loadable/component'
import { isLoaded as isPageLoaded, load as loadPage } from 'redux/modules/page'

const PageView = loadable(() =>
  import(/* webpackChunkName: "PageView" */'./PageView')
)

@asyncConnect([
  {
    promise: ({ store: { dispatch, getState }, location: { pathname } }) => {
      const promises = []
      if (!isPageLoaded(getState(), pathname)) {
        promises.push(dispatch(loadPage(pathname)))
      }
      return Promise.all(promises)
    }
  }
])
@connect(
  state => ({
    page: state.page.data
  })
)
export default class PageViewContainer extends Component {
  render() {
    return <PageView {...this.props} />
  }
}