Merge pull request #767 from matrix-org/dbkr/recaptcha_show_busy

Show spinner whilst processing recaptcha response

src/components/structures/InteractiveAuth.js

@@ -140,13 +140,20 @@ export default React.createClass({
         });
     },
 
-    _requestCallback: function(auth) {
+    _requestCallback: function(auth, background) {
+        const makeRequestPromise = this.props.makeRequest(auth);
+
+        // if it's a background request, just do it: we don't want
+        // it to affect the state of our UI.
+        if (background) return makeRequestPromise;
+
+        // otherwise, manage the state of the spinner and error messages
         this.setState({
             busy: true,
             errorText: null,
             stageErrorText: null,
         });
-        return this.props.makeRequest(auth).finally(() => {
+        return makeRequestPromise.finally(() => {
             if (this._unmounted) {
                 return;
             }

src/components/views/login/InteractiveAuthEntryComponents.js

@@ -160,6 +160,7 @@ export const RecaptchaAuthEntry = React.createClass({
         submitAuthDict: React.PropTypes.func.isRequired,
         stageParams: React.PropTypes.object.isRequired,
         errorText: React.PropTypes.string,
+        busy: React.PropTypes.bool,
     },
 
     _onCaptchaResponse: function(response) {
@@ -170,6 +171,11 @@ export const RecaptchaAuthEntry = React.createClass({
     },
 
     render: function() {
+        if (this.props.busy) {
+            const Loader = sdk.getComponent("elements.Spinner");
+            return <Loader />;
+        }
+
         const CaptchaForm = sdk.getComponent("views.login.CaptchaForm");
         var sitePublicKey = this.props.stageParams.public_key;
         return (