createAsyncPage.jsx

/** @jsx React.DOM */
'use strict';

var React = require('react'),
    Spinner = require('../atoms/Spinner');

function createAsyncPage(handlerPromiseFactory, displayName) {
  var cachedHandler = null;

  return React.createClass({
    displayName: 'Async' + displayName,

    statics: {
      willTransitionTo(transition, params, query) {
        transition.wait(handlerPromiseFactory().then(handler => {
          if (handler.willTransitionTo) {
            handler.willTransitionTo(transition, params, query);
          }
          
          return transition.promise;
        }));
      }
    },

    getInitialState() {
      return {
        handler: cachedHandler
      };
    },

    componentWillMount() {
      if (this.state.handler) {
        return;
      }

      handlerPromiseFactory().then(handler => {
        cachedHandler = handler;

        if (this.isMounted()) {
          this.setState({ handler: handler });
        }
      });
    },

    render() {
      var { handler } = this.state;
      if (!handler) {
        return (
          <Spinner />
        );
      }

      return this.transferPropsTo(<handler />);
    }
  });
}

module.exports = createAsyncPage;