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 `<Spinner>` instead of the default `<Login>`. This might be too invasive, and a default spinner may be better.pull/21833/head
parent
a8d85ca2ad
commit
30c5af35e5
|
@ -276,6 +276,11 @@ export function setLoggedIn(credentials) {
|
||||||
console.log("setLoggedIn => %s (guest=%s) hs=%s",
|
console.log("setLoggedIn => %s (guest=%s) hs=%s",
|
||||||
credentials.userId, credentials.guest,
|
credentials.userId, credentials.guest,
|
||||||
credentials.homeserverUrl);
|
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
|
// Resolves by default
|
||||||
let teamPromise = Promise.resolve(null);
|
let teamPromise = Promise.resolve(null);
|
||||||
|
|
|
@ -568,6 +568,9 @@ module.exports = React.createClass({
|
||||||
case 'set_theme':
|
case 'set_theme':
|
||||||
this._onSetTheme(payload.value);
|
this._onSetTheme(payload.value);
|
||||||
break;
|
break;
|
||||||
|
case 'on_logging_in':
|
||||||
|
this.setState({loggingIn: true});
|
||||||
|
break;
|
||||||
case 'on_logged_in':
|
case 'on_logged_in':
|
||||||
this._onLoggedIn(payload.teamToken);
|
this._onLoggedIn(payload.teamToken);
|
||||||
break;
|
break;
|
||||||
|
@ -757,6 +760,7 @@ module.exports = React.createClass({
|
||||||
this.setState({
|
this.setState({
|
||||||
guestCreds: null,
|
guestCreds: null,
|
||||||
logged_in: true,
|
logged_in: true,
|
||||||
|
loggingIn: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (teamToken) {
|
if (teamToken) {
|
||||||
|
@ -1160,7 +1164,11 @@ module.exports = React.createClass({
|
||||||
// console.log("rendering; loading="+this.state.loading+"; screen="+this.state.screen +
|
// console.log("rendering; loading="+this.state.loading+"; screen="+this.state.screen +
|
||||||
// "; logged_in="+this.state.logged_in+"; ready="+this.state.ready);
|
// "; 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
|
||||||
|
// (`<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
|
||||||
|
// actions `on_logging_in` and `on_logged_in`.
|
||||||
|
if (this.state.loading || this.state.loggingIn) {
|
||||||
var Spinner = sdk.getComponent('elements.Spinner');
|
var Spinner = sdk.getComponent('elements.Spinner');
|
||||||
return (
|
return (
|
||||||
<div className="mx_MatrixChat_splash">
|
<div className="mx_MatrixChat_splash">
|
||||||
|
|
Loading…
Reference in New Issue