OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Add a loading state for email addresses/phone numbers in settings 

Fixes https://github.com/vector-im/riot-web/issues/13432
pull/21833/head
Travis Ralston 2020-05-06 15:17:55 -06:00
parent 19bb678dd6
commit 9ae812c346
2 changed files with 32 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss
View File

@ -23,6 +23,12 @@ limitations under the License.
margin-top: 0;
}
.mx_GeneralUserSettingsTab_accountSection .mx_Spinner,
.mx_GeneralUserSettingsTab_discovery .mx_Spinner {
// Move the spinner to the left side of the container (default center)
justify-content: left;
}
.mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,
.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,
.mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,

39
src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
View File

@ -38,6 +38,7 @@ import {SERVICE_TYPES} from "matrix-js-sdk";
import IdentityAuthClient from "../../../../../IdentityAuthClient";
import {abbreviateUrl} from "../../../../../utils/UrlUtils";
import { getThreepidsWithBindStatus } from '../../../../../boundThreepids';
import Spinner from "../../../elements/Spinner";
export default class GeneralUserSettingsTab extends React.Component {
static propTypes = {
@ -60,6 +61,7 @@ export default class GeneralUserSettingsTab extends React.Component {
},
emails: [],
msisdns: [],
loading3pids: true, // whether or not the emails and msisdns have been loaded
...this._calculateThemeState(),
customThemeUrl: "",
customThemeMessage: {isError: false, text: ""},
@ -158,8 +160,11 @@ export default class GeneralUserSettingsTab extends React.Component {
);
console.warn(e);
}
this.setState({ emails: threepids.filter((a) => a.medium === 'email') });
this.setState({ msisdns: threepids.filter((a) => a.medium === 'msisdn') });
this.setState({
emails: threepids.filter((a) => a.medium === 'email'),
msisdns: threepids.filter((a) => a.medium === 'msisdn'),
loading3pids: false,
});
}
async _checkTerms() {
@ -325,7 +330,6 @@ export default class GeneralUserSettingsTab extends React.Component {
const ChangePassword = sdk.getComponent("views.settings.ChangePassword");
const EmailAddresses = sdk.getComponent("views.settings.account.EmailAddresses");
const PhoneNumbers = sdk.getComponent("views.settings.account.PhoneNumbers");
const Spinner = sdk.getComponent("views.elements.Spinner");
let passwordChangeForm = (
<ChangePassword
@ -344,18 +348,24 @@ export default class GeneralUserSettingsTab extends React.Component {
// For newer homeservers with separate 3PID add and bind methods (MSC2290),
// there is no such concern, so we can always show the HS account 3PIDs.
if (this.state.haveIdServer || this.state.serverSupportsSeparateAddAndBind === true) {
threepidSection = <div>
<span className="mx_SettingsTab_subheading">{_t("Email addresses")}</span>
<EmailAddresses
const emails = this.state.loading3pids || true
? <Spinner />
: <EmailAddresses
emails={this.state.emails}
onEmailsChange={this._onEmailsChange}
/>
<span className="mx_SettingsTab_subheading">{_t("Phone numbers")}</span>
<PhoneNumbers
/>;
const msisdns = this.state.loading3pids
? <Spinner />
: <PhoneNumbers
msisdns={this.state.msisdns}
onMsisdnsChange={this._onMsisdnsChange}
/>
/>;
threepidSection = <div>
<span className="mx_SettingsTab_subheading">{_t("Email addresses")}</span>
{emails}
<span className="mx_SettingsTab_subheading">{_t("Phone numbers")}</span>
{msisdns}
</div>;
} else if (this.state.serverSupportsSeparateAddAndBind === null) {
threepidSection = <Spinner />;
@ -491,12 +501,15 @@ export default class GeneralUserSettingsTab extends React.Component {
const EmailAddresses = sdk.getComponent("views.settings.discovery.EmailAddresses");
const PhoneNumbers = sdk.getComponent("views.settings.discovery.PhoneNumbers");
const emails = this.state.loading3pids ? <Spinner /> : <EmailAddresses emails={this.state.emails} />;
const msisdns = this.state.loading3pids ? <Spinner /> : <PhoneNumbers msisdns={this.state.msisdns} />;
const threepidSection = this.state.haveIdServer ? <div className='mx_GeneralUserSettingsTab_discovery'>
<span className="mx_SettingsTab_subheading">{_t("Email addresses")}</span>
<EmailAddresses emails={this.state.emails} />
{emails}
<span className="mx_SettingsTab_subheading">{_t("Phone numbers")}</span>
<PhoneNumbers msisdns={this.state.msisdns} />
{msisdns}
</div> : null;
return (