Merge pull request #3142 from matrix-org/travis/preview-loading

Show a loading state for slow peeks
matrix-org · Jun 27, 2019 · 7f2ab39 · 7f2ab39
2 parents dff6ca8 + ca6ddf3
commit 7f2ab39
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -832,6 +832,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",