mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-25 09:46:07 +08:00
0e19f4511e
Summary: Previously, when adding an account, we waited for it to be completely loaded (which meant having fetched the folder list) before focusing it on the sidebar. This could take several seconds, so it made the app feel unresponsive or slow when adding an account. Then, we changed the logic to wait an arbitrary amount of time to focus the newly added account in the sidebar, with the hope that it would be enough time to focus it correctly but that it wouldn't seem too long. This still caused the unwanted effect of focusing it before it had been fully loaded. This commit changes the auth flow so that the onboarding shows a Success page until the newly added account is fully loaded, and only /then/ closes itself, focuses the main window, and allows the account to be correctly focused in the sidebar. Test Plan: manual Reviewers: halla, evan Reviewed By: evan Differential Revision: https://phab.nylas.com/D3751
89 lines
2.7 KiB
JavaScript
89 lines
2.7 KiB
JavaScript
import React from 'react';
|
|
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
|
|
import OnboardingStore from './onboarding-store';
|
|
import PageTopBar from './page-top-bar';
|
|
|
|
import WelcomePage from './page-welcome';
|
|
import TutorialPage from './page-tutorial';
|
|
import AuthenticatePage from './page-authenticate';
|
|
import AccountChoosePage from './page-account-choose';
|
|
import AccountSettingsPage from './page-account-settings';
|
|
import AccountSettingsPageGmail from './page-account-settings-gmail';
|
|
import AccountSettingsPageIMAP from './page-account-settings-imap';
|
|
import AccountOnboardingSuccess from './page-account-onboarding-success';
|
|
import AccountSettingsPageExchange from './page-account-settings-exchange';
|
|
import InitialPreferencesPage from './page-initial-preferences';
|
|
|
|
|
|
const PageComponents = {
|
|
"welcome": WelcomePage,
|
|
"tutorial": TutorialPage,
|
|
"authenticate": AuthenticatePage,
|
|
"account-choose": AccountChoosePage,
|
|
"account-settings": AccountSettingsPage,
|
|
"account-settings-gmail": AccountSettingsPageGmail,
|
|
"account-settings-imap": AccountSettingsPageIMAP,
|
|
"account-settings-exchange": AccountSettingsPageExchange,
|
|
"account-onboarding-success": AccountOnboardingSuccess,
|
|
"initial-preferences": InitialPreferencesPage,
|
|
}
|
|
|
|
export default class OnboardingRoot extends React.Component {
|
|
static displayName = 'OnboardingRoot';
|
|
static containerRequired = false;
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = this._getStateFromStore();
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.unsubscribe = OnboardingStore.listen(this._onStateChanged, this);
|
|
NylasEnv.center();
|
|
NylasEnv.displayWindow();
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
if (this.unsubscribe) {
|
|
this.unsubscribe();
|
|
}
|
|
}
|
|
|
|
_getStateFromStore = () => {
|
|
return {
|
|
page: OnboardingStore.page(),
|
|
pageDepth: OnboardingStore.pageDepth(),
|
|
accountInfo: OnboardingStore.accountInfo(),
|
|
};
|
|
}
|
|
|
|
_onStateChanged = () => {
|
|
this.setState(this._getStateFromStore());
|
|
}
|
|
|
|
render() {
|
|
const Component = PageComponents[this.state.page];
|
|
if (!Component) {
|
|
throw new Error(`Cannot find component for page: ${this.state.page}`);
|
|
}
|
|
|
|
return (
|
|
<div className="page-frame">
|
|
<PageTopBar
|
|
pageDepth={this.state.pageDepth}
|
|
allowMoveBack={!['initial-preferences', 'account-choose'].includes(this.state.page)}
|
|
/>
|
|
<ReactCSSTransitionGroup
|
|
transitionName="alpha-fade"
|
|
transitionLeaveTimeout={150}
|
|
transitionEnterTimeout={150}
|
|
>
|
|
<div key={this.state.page} className="page-container">
|
|
<Component accountInfo={this.state.accountInfo} ref="activePage" />
|
|
</div>
|
|
</ReactCSSTransitionGroup>
|
|
</div>
|
|
);
|
|
}
|
|
}
|