From 30c5af35e572fea179beefc0ba9c4b3e8e342dba Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Mon, 27 Mar 2017 16:39:04 +0100 Subject: [PATCH 1/2] Add state loggingIn to MatrixChat to fix flashing login To prevent the login screen from flashing when refreshing the app, use some state to indicate that a login is in progress, and OR that with the existing `loading` boolean to show the `` instead of the default ``. This might be too invasive, and a default spinner may be better. --- src/Lifecycle.js | 5 +++++ src/components/structures/MatrixChat.js | 10 +++++++++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/Lifecycle.js b/src/Lifecycle.js index fc8087e12d..f20716cae6 100644 --- a/src/Lifecycle.js +++ b/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); diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 9b51e7f3fb..c264fbec63 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -568,6 +568,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; @@ -757,6 +760,7 @@ module.exports = React.createClass({ this.setState({ guestCreds: null, logged_in: true, + loggingIn: false, }); if (teamToken) { @@ -1160,7 +1164,11 @@ module.exports = React.createClass({ // console.log("rendering; loading="+this.state.loading+"; screen="+this.state.screen + // "; logged_in="+this.state.logged_in+"; ready="+this.state.ready); - if (this.state.loading) { + // `loading` might be set to false before `logged_in = true`, causing the default + // (``) 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 + // actions `on_logging_in` and `on_logged_in`. + if (this.state.loading || this.state.loggingIn) { var Spinner = sdk.getComponent('elements.Spinner'); return (
From c650cfffaca9ff80d704d1faedaf3ec9ac341881 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Mon, 27 Mar 2017 17:14:39 +0100 Subject: [PATCH 2/2] logged_in -> loggedIn Also added `loggingIn` to `initialState` and removed some commented code. --- src/components/structures/MatrixChat.js | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index c264fbec63..8ae38b9f3c 100644 --- a/src/components/structures/MatrixChat.js +++ b/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', }); @@ -759,7 +760,7 @@ module.exports = React.createClass({ _onLoggedIn: function(teamToken) { this.setState({ guestCreds: null, - logged_in: true, + loggedIn: true, loggingIn: false, }); @@ -794,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, @@ -975,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. @@ -1161,10 +1162,7 @@ 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 + - // "; logged_in="+this.state.logged_in+"; ready="+this.state.ready); - - // `loading` might be set to false before `logged_in = true`, causing the default + // `loading` might be set to false before `loggedIn = true`, causing the default // (``) 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 // actions `on_logging_in` and `on_logged_in`. @@ -1182,7 +1180,7 @@ module.exports = React.createClass({ ); - } 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. @@ -1197,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 (