show spinner while loading local aliases

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,6 +103,7 @@ export default class AliasSettings extends React.Component {
 
     async componentWillMount() {
         const cli = MatrixClientPeg.get();
+        try {
             if (await cli.doesServerSupportUnstableFeature("org.matrix.msc2432")) {
                 const response = await cli.unstableGetLocalAliases(this.props.roomId);
                 const localAliases = response.aliases;
@@ -125,6 +127,9 @@ export default class AliasSettings extends React.Component {
                 });
                 this.setState(state);
             }
+        } finally {
+            this.setState({localAliasesLoading: false});
+        }
     }
 
     aliasesToDictionary(aliases) {
@@ -302,10 +307,12 @@ export default class AliasSettings extends React.Component {
             );
         }
 
-        return (
-            <div className='mx_AliasSettings'>
-                {canonicalAliasSection}
-                <EditableAliasesList
+        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] || []}
@@ -321,7 +328,13 @@ export default class AliasSettings extends React.Component {
                     'New address (e.g. #foo:%(localDomain)s)', {localDomain: localDomain},
                 )}
                 domain={localDomain}
-                />
+            />;
+        }
+
+        return (
+            <div className='mx_AliasSettings'>
+                {canonicalAliasSection}
+                {localAliasesList}
                 {remoteAliasesSection}
             </div>
         );