From a5b9682572880379fb196b69b2f4f55ed52a0713 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Wed, 19 Feb 2020 15:15:05 +0100
Subject: [PATCH] show spinner while loading local aliases

---
 .../views/room_settings/AliasSettings.js      | 91 +++++++++++--------
 1 file changed, 52 insertions(+), 39 deletions(-)

diff --git a/src/components/views/room_settings/AliasSettings.js b/src/components/views/room_settings/AliasSettings.js
index d7befa488d..a52fa09c87 100644
--- a/src/components/views/room_settings/AliasSettings.js
+++ b/src/components/views/room_settings/AliasSettings.js
@@ -91,6 +91,7 @@ export default class AliasSettings extends React.Component {
             remoteDomains: [], // [ domain.com, foobar.com ]
             canonicalAlias: null, // #canonical:domain.com
             updatingCanonicalAlias: false,
+            localAliasesLoading: true,
         };
 
         if (props.canonicalAliasEvent) {
@@ -102,28 +103,32 @@ export default class AliasSettings extends React.Component {
 
     async componentWillMount() {
         const cli = MatrixClientPeg.get();
-        if (await cli.doesServerSupportUnstableFeature("org.matrix.msc2432")) {
-            const response = await cli.unstableGetLocalAliases(this.props.roomId);
-            const localAliases = response.aliases;
-            const localDomain = cli.getDomain();
-            const domainToAliases = Object.assign(
-                {},
-                // FIXME, any localhost alt_aliases will be ignored as they are overwritten by localAliases
-                this.aliasesToDictionary(this._getAltAliases()),
-                {[localDomain]: localAliases || []},
-            );
-            const remoteDomains = Object.keys(domainToAliases).filter((domain) => {
-                return domain !== localDomain && domainToAliases[domain].length > 0;
-            });
-            this.setState({ domainToAliases, remoteDomains });
-        } else {
-            const state = {};
-            const localDomain = cli.getDomain();
-            state.domainToAliases = this.aliasEventsToDictionary(this.props.aliasEvents || []);
-            state.remoteDomains = Object.keys(state.domainToAliases).filter((domain) => {
-                return domain !== localDomain && state.domainToAliases[domain].length > 0;
-            });
-            this.setState(state);
+        try {
+            if (await cli.doesServerSupportUnstableFeature("org.matrix.msc2432")) {
+                const response = await cli.unstableGetLocalAliases(this.props.roomId);
+                const localAliases = response.aliases;
+                const localDomain = cli.getDomain();
+                const domainToAliases = Object.assign(
+                    {},
+                    // FIXME, any localhost alt_aliases will be ignored as they are overwritten by localAliases
+                    this.aliasesToDictionary(this._getAltAliases()),
+                    {[localDomain]: localAliases || []},
+                );
+                const remoteDomains = Object.keys(domainToAliases).filter((domain) => {
+                    return domain !== localDomain && domainToAliases[domain].length > 0;
+                });
+                this.setState({ domainToAliases, remoteDomains });
+            } else {
+                const state = {};
+                const localDomain = cli.getDomain();
+                state.domainToAliases = this.aliasEventsToDictionary(this.props.aliasEvents || []);
+                state.remoteDomains = Object.keys(state.domainToAliases).filter((domain) => {
+                    return domain !== localDomain && state.domainToAliases[domain].length > 0;
+                });
+                this.setState(state);
+            }
+        } finally {
+            this.setState({localAliasesLoading: false});
         }
     }
 
@@ -302,26 +307,34 @@ export default class AliasSettings extends React.Component {
             );
         }
 
+        let localAliasesList;
+        if (this.state.localAliasesLoading) {
+            const Spinner = sdk.getComponent("elements.Spinner");
+            localAliasesList = <Spinner />;
+        } else {
+            localAliasesList = <EditableAliasesList
+                id="roomAliases"
+                className={"mx_RoomSettings_localAliases"}
+                items={this.state.domainToAliases[localDomain] || []}
+                newItem={this.state.newAlias}
+                onNewItemChanged={this.onNewAliasChanged}
+                canRemove={this.props.canSetAliases}
+                canEdit={this.props.canSetAliases}
+                onItemAdded={this.onLocalAliasAdded}
+                onItemRemoved={this.onLocalAliasDeleted}
+                itemsLabel={_t('Local addresses for this room:')}
+                noItemsLabel={_t('This room has no local addresses')}
+                placeholder={_t(
+                    'New address (e.g. #foo:%(localDomain)s)', {localDomain: localDomain},
+                )}
+                domain={localDomain}
+            />;
+        }
+
         return (
             <div className='mx_AliasSettings'>
                 {canonicalAliasSection}
-                <EditableAliasesList
-                    id="roomAliases"
-                    className={"mx_RoomSettings_localAliases"}
-                    items={this.state.domainToAliases[localDomain] || []}
-                    newItem={this.state.newAlias}
-                    onNewItemChanged={this.onNewAliasChanged}
-                    canRemove={this.props.canSetAliases}
-                    canEdit={this.props.canSetAliases}
-                    onItemAdded={this.onLocalAliasAdded}
-                    onItemRemoved={this.onLocalAliasDeleted}
-                    itemsLabel={_t('Local addresses for this room:')}
-                    noItemsLabel={_t('This room has no local addresses')}
-                    placeholder={_t(
-                        'New address (e.g. #foo:%(localDomain)s)', {localDomain: localDomain},
-                    )}
-                    domain={localDomain}
-                />
+                {localAliasesList}
                 {remoteAliasesSection}
             </div>
         );