Higher-Order component rendering a component after a timeout.

renderComponentAfterTimeout.js

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import Loading from 'loading';

export default function TimedOut(WrappedComponent) {
  const propTypes = {
    delay: PropTypes.number.isRequired,
  };

  class Wrapper extends Component {
    constructor() {
      super();

      this.state = { isTimeOver: false };
    }

    componentDidMount() {
      this.timeout = setTimeout(() => {
        this.setState({ isTimeOver: true });
      }, this.props.delay);
    }

    componentWillUnmount() {
      clearTimeout(this.timeout);
    }

    render() {
      if (this.state.isTimeOver) {
        const { delay, ...props } = this.props; // eslint-disable-line
        return <WrappedComponent {...props} />;
      }

      return null;
    }
  }

  Wrapper.displayName = `TimedOut(${WrappedComponent.name})`;
  Wrapper.propTypes = propTypes;

  return Wrapper;
}

const DelayedLoading = TimedOut(Loading);

ReactDOM.render(
  <DelayedLoading delay={1000} />
  document.getElementById('root'),
);