From af8dfda9a7a78873d5e0b7f5aede5cd266ed270c Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Wed, 17 Oct 2018 13:53:12 -0600
Subject: [PATCH] Add a bit of text to explain the purpose of the
 RoomPreviewSpinner

Fixes https://github.com/vector-im/riot-web/issues/5869
---
 res/css/views/rooms/_RoomPreviewBar.scss     |  4 ++++
 src/components/structures/RoomView.js        |  3 +++
 src/components/views/rooms/RoomPreviewBar.js | 11 ++++++++++-
 src/i18n/strings/en_EN.json                  |  1 +
 4 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_RoomPreviewBar.scss b/res/css/views/rooms/_RoomPreviewBar.scss
index 331eb582ea..8196740499 100644
--- a/res/css/views/rooms/_RoomPreviewBar.scss
+++ b/res/css/views/rooms/_RoomPreviewBar.scss
@@ -56,3 +56,7 @@ limitations under the License.
 .mx_RoomPreviewBar_warningIcon {
     padding: 12px;
 }
+
+.mx_RoomPreviewBar_spinnerIntro {
+    margin-top: 50px;
+}
\ No newline at end of file
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 8e226bdfcf..52264266a8 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1514,6 +1514,7 @@ module.exports = React.createClass({
                                             canPreview={false} error={this.state.roomLoadError}
                                             roomAlias={roomAlias}
                                             spinner={this.state.joining}
+                                            spinnerState="joining"
                                             inviterName={inviterName}
                                             invitedEmail={invitedEmail}
                                             room={this.state.room}
@@ -1558,6 +1559,7 @@ module.exports = React.createClass({
                                             inviterName={inviterName}
                                             canPreview={false}
                                             spinner={this.state.joining}
+                                            spinnerState="joining"
                                             room={this.state.room}
                             />
                         </div>
@@ -1645,6 +1647,7 @@ module.exports = React.createClass({
                                 onForgetClick={this.onForgetClick}
                                 onRejectClick={this.onRejectThreepidInviteButtonClicked}
                                 spinner={this.state.joining}
+                                spinnerState="joining"
                                 inviterName={inviterName}
                                 invitedEmail={invitedEmail}
                                 canPreview={this.state.canPeek}
diff --git a/src/components/views/rooms/RoomPreviewBar.js b/src/components/views/rooms/RoomPreviewBar.js
index 5ec19d185e..9d3dbe5217 100644
--- a/src/components/views/rooms/RoomPreviewBar.js
+++ b/src/components/views/rooms/RoomPreviewBar.js
@@ -44,9 +44,13 @@ module.exports = React.createClass({
         error: PropTypes.object,
 
         canPreview: PropTypes.bool,
-        spinner: PropTypes.bool,
         room: PropTypes.object,
 
+        // When a spinner is present, a spinnerState can be specified to indicate the
+        // purpose of the spinner.
+        spinner: PropTypes.bool,
+        spinnerState: PropTypes.oneOf(["joining"]),
+
         // The alias that was used to access this room, if appropriate
         // If given, this will be how the room is referred to (eg.
         // in error messages).
@@ -93,7 +97,12 @@ module.exports = React.createClass({
 
         if (this.props.spinner || this.state.busy) {
             const Spinner = sdk.getComponent("elements.Spinner");
+            let spinnerIntro = "";
+            if (this.props.spinnerState === "joining") {
+                spinnerIntro = _t("Joining room...");
+            }
             return (<div className="mx_RoomPreviewBar">
+                <p className="mx_RoomPreviewBar_spinnerIntro">{ spinnerIntro }</p>
                 <Spinner />
             </div>);
         }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index e42d3ce434..e0f4663532 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -512,6 +512,7 @@
     "You have no historical rooms": "You have no historical rooms",
     "Historical": "Historical",
     "System Alerts": "System Alerts",
+    "Joining room...": "Joining room...",
     "Unable to ascertain that the address this invite was sent to matches one associated with your account.": "Unable to ascertain that the address this invite was sent to matches one associated with your account.",
     "This invitation was sent to an email address which is not associated with this account:": "This invitation was sent to an email address which is not associated with this account:",
     "You may wish to login with a different account, or add this email to this account.": "You may wish to login with a different account, or add this email to this account.",