From ec63e18b42f3b5b195150c99060ae257ff84ed30 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 21 Mar 2017 18:40:41 +0000
Subject: [PATCH] Show spinner whilst processing recaptcha response

The fact that we showed no feedback whilst submitting the captcha
response was causing confusion on slower connections where this
took a nontrivial amount of time.

Takes a new flag from the js-sdk that indicates whether the
request being made is a background request, presenting a spinner
appropriately.

Requires https://github.com/matrix-org/matrix-js-sdk/pull/396
---
 src/components/structures/InteractiveAuth.js         | 12 +++++++-----
 .../views/login/InteractiveAuthEntryComponents.js    |  6 ++++++
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/structures/InteractiveAuth.js b/src/components/structures/InteractiveAuth.js
index 71fee883be..3dd34f51b4 100644
--- a/src/components/structures/InteractiveAuth.js
+++ b/src/components/structures/InteractiveAuth.js
@@ -140,9 +140,9 @@ export default React.createClass({
         });
     },
 
-    _requestCallback: function(auth) {
+    _requestCallback: function(auth, background) {
         this.setState({
-            busy: true,
+            busy: !background,
             errorText: null,
             stageErrorText: null,
         });
@@ -150,9 +150,11 @@ export default React.createClass({
             if (this._unmounted) {
                 return;
             }
-            this.setState({
-                busy: false,
-            });
+            if (background) {
+                this.setState({
+                    busy: false,
+                });
+            }
         });
     },
 
diff --git a/src/components/views/login/InteractiveAuthEntryComponents.js b/src/components/views/login/InteractiveAuthEntryComponents.js
index 2d8abf9216..c4084facb2 100644
--- a/src/components/views/login/InteractiveAuthEntryComponents.js
+++ b/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 (