React Loadable Component

1-loadable.js

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

export default function loadable(hasLoadedTest, Component) {
  return (props) => {
    if (hasLoadedTest(props)) {
      return <Component { ...props } />;
    }
    else {
      return <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 } />
}
*/

Turned it into a one-liner :) https://gist.github.com/StevenLangbroek/cd6c68681fb78f1db0d8