React Loadable Component

1-loadable.js

import React from 'react';
import Spinner from 'react-spinner';

export const loadable = (hasLoadedTest, Component) => props => hasLoadedTest(props) ? <Component { ...props } /> : <Spinner />;

2-examples.js

// Will only render if `items` is present, otherwise renders a spinner
const LoadableList = loadable(
  ({ items }) => !!items,
  List // List is a React component
);

/*
render() {
  return <LoadableList items={ this.state.items } />
}
*/


// Will only render if `image` is present, otherwise renders a spinner
const LoadableImage = loadable(
  ({ image }) => !!image,
  ({ image: { URL, width, height }, description }) =>
    <img src={ URL } width={ width } height={ height } alt={ description } />
);

/*
render() {
  return <LoadableImage image={ this.state.image } />
}
*/

Nice one man!