From ca6ddf324fb12ac72179bd10432591bc23783685 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Tue, 25 Jun 2019 20:56:33 -0600
Subject: [PATCH] Show a loading state for slow peeks

---
 res/css/views/rooms/_RoomPreviewBar.scss     | 10 ++++++++++
 src/components/structures/RoomView.js        |  1 +
 src/components/views/rooms/RoomPreviewBar.js | 16 +++++++++++++++-
 src/i18n/strings/en_EN.json                  |  1 +
 4 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_RoomPreviewBar.scss b/res/css/views/rooms/_RoomPreviewBar.scss
index ea3b787971..6ac5546f78 100644
--- a/res/css/views/rooms/_RoomPreviewBar.scss
+++ b/res/css/views/rooms/_RoomPreviewBar.scss
@@ -39,6 +39,16 @@ limitations under the License.
         margin: 10px 10px 10px 0;
         flex: 0 0 auto;
     }
+
+    .mx_RoomPreviewBar_footer {
+        font-size: 12px;
+        line-height: 20px;
+
+        .mx_Spinner {
+            vertical-align: middle;
+            display: inline-block;
+        }
+    }
 }
 
 .mx_RoomPreviewBar_dark {
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index cda3f60fce..f02c4d45c3 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1523,6 +1523,7 @@ module.exports = React.createClass({
                     <div className="mx_RoomView">
                         <RoomPreviewBar
                             canPreview={false}
+                            previewLoading={this.state.peekLoading}
                             error={this.state.roomLoadError}
                             loading={loading}
                             joining={this.state.joining}
diff --git a/src/components/views/rooms/RoomPreviewBar.js b/src/components/views/rooms/RoomPreviewBar.js
index cbc44d0933..fb5bc3ae0d 100644
--- a/src/components/views/rooms/RoomPreviewBar.js
+++ b/src/components/views/rooms/RoomPreviewBar.js
@@ -66,6 +66,7 @@ module.exports = React.createClass({
         error: PropTypes.object,
 
         canPreview: PropTypes.bool,
+        previewLoading: PropTypes.bool,
         room: PropTypes.object,
 
         // When a spinner is present, a spinnerState can be specified to indicate the
@@ -254,6 +255,8 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        const Spinner = sdk.getComponent('elements.Spinner');
+
         let showSpinner = false;
         let darkStyle = false;
         let title;
@@ -262,6 +265,7 @@ module.exports = React.createClass({
         let primaryActionLabel;
         let secondaryActionHandler;
         let secondaryActionLabel;
+        let footer;
 
         const messageCase = this._getMessageCase();
         switch (messageCase) {
@@ -287,6 +291,14 @@ module.exports = React.createClass({
                 primaryActionHandler = this.onRegisterClick;
                 secondaryActionLabel = _t("Sign In");
                 secondaryActionHandler = this.onLoginClick;
+                if (this.props.previewLoading) {
+                    footer = (
+                        <div>
+                            <Spinner w={20} h={20}/>
+                            {_t("Loading room preview")}
+                        </div>
+                    );
+                }
                 break;
             }
             case MessageCase.Kicked: {
@@ -433,7 +445,6 @@ module.exports = React.createClass({
         }
 
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const Spinner = sdk.getComponent('elements.Spinner');
 
         let subTitleElements;
         if (subTitle) {
@@ -484,6 +495,9 @@ module.exports = React.createClass({
                     { secondaryButton }
                     { primaryButton }
                 </div>
+                <div className="mx_RoomPreviewBar_footer">
+                    { footer }
+                </div>
             </div>
         );
     },
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 3edaaf6241..8a54a4ba53 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -835,6 +835,7 @@
     "Join the conversation with an account": "Join the conversation with an account",
     "Sign Up": "Sign Up",
     "Sign In": "Sign In",
+    "Loading room preview": "Loading room preview",
     "You were kicked from %(roomName)s by %(memberName)s": "You were kicked from %(roomName)s by %(memberName)s",
     "Reason: %(reason)s": "Reason: %(reason)s",
     "Forget this room": "Forget this room",