Merge pull request #773 from matrix-org/luke/fix-login-flash-new-state

Add state loggingIn to MatrixChat to fix flashing login

src/Lifecycle.js

@@ -276,6 +276,11 @@ export function setLoggedIn(credentials) {
     console.log("setLoggedIn => %s (guest=%s) hs=%s",
                 credentials.userId, credentials.guest,
                 credentials.homeserverUrl);
+    // This is dispatched to indicate that the user is still in the process of logging in
+    // because `teamPromise` may take some time to resolve, breaking the assumption that
+    // `setLoggedIn` takes an "instant" to complete, and dispatch `on_logged_in` a few ms
+    // later than MatrixChat might assume.
+    dis.dispatch({action: 'on_logging_in'});
 
     // Resolves by default
     let teamPromise = Promise.resolve(null);

src/components/structures/MatrixChat.js

@@ -117,7 +117,8 @@ module.exports = React.createClass({
             // If we're trying to just view a user ID (i.e. /user URL), this is it
             viewUserId: null,
 
-            logged_in: false,
+            loggedIn: false,
+            loggingIn: false,
             collapse_lhs: false,
             collapse_rhs: false,
             ready: false,
@@ -315,7 +316,7 @@ module.exports = React.createClass({
         const newState = {
             screen: undefined,
             viewUserId: null,
-            logged_in: false,
+            loggedIn: false,
             ready: false,
             upgradeUsername: null,
             guestAccessToken: null,
@@ -364,7 +365,7 @@ module.exports = React.createClass({
                 this.notifyNewScreen('login');
                 break;
             case 'start_post_registration':
-                this.setState({ // don't clobber logged_in status
+                this.setState({ // don't clobber loggedIn status
                     screen: 'post_registration'
                 });
                 break;
@@ -388,7 +389,7 @@ module.exports = React.createClass({
                 this.notifyNewScreen('register');
                 break;
             case 'start_password_recovery':
-                if (this.state.logged_in) return;
+                if (this.state.loggedIn) return;
                 this.setStateForNewScreen({
                     screen: 'forgot_password',
                 });
@@ -568,6 +569,9 @@ module.exports = React.createClass({
             case 'set_theme':
                 this._onSetTheme(payload.value);
                 break;
+            case 'on_logging_in':
+                this.setState({loggingIn: true});
+                break;
             case 'on_logged_in':
                 this._onLoggedIn(payload.teamToken);
                 break;
@@ -756,7 +760,8 @@ module.exports = React.createClass({
     _onLoggedIn: function(teamToken) {
         this.setState({
             guestCreds: null,
-            logged_in: true,
+            loggedIn: true,
+            loggingIn: false,
         });
 
         if (teamToken) {
@@ -790,7 +795,7 @@ module.exports = React.createClass({
     _onLoggedOut: function() {
         this.notifyNewScreen('login');
         this.setStateForNewScreen({
-            logged_in: false,
+            loggedIn: false,
             ready: false,
             collapse_lhs: false,
             collapse_rhs: false,
@@ -971,7 +976,7 @@ module.exports = React.createClass({
 
             // we can't view a room unless we're logged in
             // (a guest account is fine)
-            if (!this.state.logged_in) {
+            if (!this.state.loggedIn) {
                 // we may still be loading (ie, trying to register a guest
                 // session); otherwise we're (probably) already showing a login
                 // screen. Either way, we'll show the room once the client starts.
@@ -1157,10 +1162,11 @@ module.exports = React.createClass({
         var ForgotPassword = sdk.getComponent('structures.login.ForgotPassword');
         var LoggedInView = sdk.getComponent('structures.LoggedInView');
 
-        // console.log("rendering; loading="+this.state.loading+"; screen="+this.state.screen +
+        // `loading` might be set to false before `loggedIn = true`, causing the default
-        //             "; logged_in="+this.state.logged_in+"; ready="+this.state.ready);
+        // (`<Login>`) to be visible for a few MS (say, whilst a request is in-flight to
-
+        // the RTS). So in the meantime, use `loggingIn`, which is true between
-        if (this.state.loading) {
+        // actions `on_logging_in` and `on_logged_in`.
+        if (this.state.loading || this.state.loggingIn) {
             var Spinner = sdk.getComponent('elements.Spinner');
             return (
                 <div className="mx_MatrixChat_splash">
@@ -1174,7 +1180,7 @@ module.exports = React.createClass({
                 <PostRegistration
                     onComplete={this.onFinishPostRegistration} />
             );
-        } else if (this.state.logged_in && this.state.ready) {
+        } else if (this.state.loggedIn && this.state.ready) {
             /* for now, we stuff the entirety of our props and state into the LoggedInView.
              * we should go through and figure out what we actually need to pass down, as well
              * as using something like redux to avoid having a billion bits of state kicking around.
@@ -1189,7 +1195,7 @@ module.exports = React.createClass({
                     {...this.state}
                 />
             );
-        } else if (this.state.logged_in) {
+        } else if (this.state.loggedIn) {
             // we think we are logged in, but are still waiting for the /sync to complete
             var Spinner = sdk.getComponent('elements.Spinner');
             return (