var React = require('react');

var ChangesetBox = React.createClass({
    handleChangesetIdSubmit: function (changesetId) {
        this.setState({isOnNightly: ''});
        this.props.callback(changesetId, this.updateResult);
    },

    updateResult: function (isOnNightly) {
        var result = isOnNightly ? 'Yes!' : 'No';
        this.setState({isOnNightly: result});
    },

    getInitialState: function () {
        return {isOnNightly: ''};
    },

    render: function () {
        return (
            <div>
                <ChangesetForm onCommentSubmit={this.handleChangesetIdSubmit}/>
                <Result text={this.state.isOnNightly}/>
            </div>

        );
    }
});

var ChangesetForm = React.createClass({
    getInitialState: function () {
        return {changesetId: ''};
    },
    handleChangesetIdChange: function (e) {
        this.setState({changesetId: e.target.value});
    },

    handleSubmit: function (e) {
        e.preventDefault();
        var changesetId = this.state.changesetId.trim();
        if (!changesetId) {
            // TODO: Display error to user
            return;
        }
        this.props.onCommentSubmit(changesetId);
    },

    render: function () {
        return (
            <form onSubmit={this.handleSubmit} className="form-horizontal">
                <div className="form-group">
                    <input
                        type="text"
                        className="spinner-group"
                        placeholder="Changeset"
                        value={this.state.changesetId}
                        onChange={this.handleChangesetIdChange}/>
                    <button
                        type="submit"
                        className="btn btn-primary btn-sm spinner-group">Submit</button>
                    <div className="spinner spinner-group"></div>
                </div>
            </form>
        );
    }
});

var Result = React.createClass({
    render: function () {
        return (
            <h2>{this.props.text}</h2>
        );
    }
});

exports.ChangesetForm = ChangesetBox;

@@ -132,32 +132,49 @@
  this.setState(%7B
+isLoading: true, 
 isOnNightly: ''%7D
@@ -361,16 +361,34 @@
 tState(%7B
+isLoading: false, 
 isOnNigh
@@ -461,16 +461,34 @@
 return %7B
+isLoading: false, 
 isOnNigh
@@ -596,16 +596,36 @@
 esetForm
+%0A                   
  onComme
@@ -663,16 +663,69 @@
 dSubmit%7D
+%0A                    isLoading=%7Bthis.state.isLoading%7D
 /%3E%0A     
@@ -1333,32 +1333,138 @@
 : function () %7B%0A
+        var spinnerStyle = %7B%7D;%0A        spinnerStyle.display = (this.props.isLoading) ? 'inline' : 'none';%0A
         return (
@@ -2038,32 +2038,101 @@
             %3Cdiv
+%0A                        style=%7BspinnerStyle%7D%0A                       
  className=%22spin

Add spinner while loading.