Code splitting HOC

codeSplitting.js

// @flow
import * as React from 'react';
import {asyncComponent} from 'react-async-component';

export const loaderMaker = (bgColor: string = 'transparent') => () => (
  <div style={{position: 'absolute', width: '100%', height: '100%', backgroundColor: bgColor}} />
);

const MAX_RETRIES = 3;
const STARTING_BACKOFF = 500;

const pausedPromise = (duration: number): Promise<*> => new Promise(resolve => setTimeout(resolve, duration));

const resolveWithRetryBackoff = (
  createPromise: () => Promise<*>,
  retries: number,
  delay: number = STARTING_BACKOFF
): Promise<*> =>
  createPromise().catch(err => {
    console.error(err);

    if (retries > 1) {
      return pausedPromise(delay).then(() => resolveWithRetryBackoff(createPromise, retries - 1, delay * 2));
    }

    return Promise.reject(err);
  });

type Options = {
  name?: string,
  LoadingComponent?: React.ComponentType<*>,
};

/*
** Loads require or delays import depending on if server or client
** Default loader is transparent, as it could be a component which is not full-page
** This can be overridden.
** Chunk will be retried with a backoff.
*/
export const makeLazy = (resolve: () => Promise<*>, options: Options = {}) => {
  if (options.name != null) {
    options.name = `AsyncComponent(${options.name})`;
  }

  if (options.LoadingComponent == null) {
    options.LoadingComponent = loaderMaker();
  }

  return asyncComponent({
    resolve: () => (global.isServerRendering ? resolve() : resolveWithRetryBackoff(resolve, MAX_RETRIES)),
    env: global.isServerRendering ? 'node' : 'browser',
    ...options,
  });
};