Add spinner when room encryption is loading in room settings

element-hq · Nov 25, 2024 · 94573be · 94573be
1 parent a2a066d
commit 94573be
Showing 1 changed file with 19 additions and 12 deletions.
diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
@@ -17,6 +17,7 @@ import {
     EventType,
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
+import { InlineSpinner } from "@vector-im/compound-web";
 
 import { Icon as WarningIcon } from "../../../../../../res/img/warning.svg";
 import { _t } from "../../../../../languageHandler";
@@ -53,7 +54,7 @@ interface IState {
     guestAccess: GuestAccess;
     history: HistoryVisibility;
     hasAliases: boolean;
-    encrypted: boolean;
+    encrypted: boolean | null;
     showAdvancedSection: boolean;
 }
 
@@ -78,7 +79,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
                 HistoryVisibility.Shared,
             ),
             hasAliases: false, // async loaded in componentDidMount
-            encrypted: false, // async loaded in componentDidMount
+            encrypted: null, // async loaded in componentDidMount
             showAdvancedSection: false,
         };
     }
@@ -419,6 +420,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
         const client = this.context;
         const room = this.props.room;
         const isEncrypted = this.state.encrypted;
+        const isEncryptionLoading = isEncrypted === null;
         const hasEncryptionPermission = room.currentState.mayClientSendStateEvent(EventType.RoomEncryption, client);
         const isEncryptionForceDisabled = shouldForceDisableEncryption(client);
         const canEnableEncryption = !isEncrypted && !isEncryptionForceDisabled && hasEncryptionPermission;
@@ -451,18 +453,23 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
                                 : _t("room_settings|security|encryption_permanent")
                         }
                     >
-                        <LabelledToggleSwitch
-                            value={isEncrypted}
-                            onChange={this.onEncryptionChange}
-                            label={_t("common|encrypted")}
-                            disabled={!canEnableEncryption}
-                        />
-                        {isEncryptionForceDisabled && !isEncrypted && (
-                            <Caption>{_t("room_settings|security|encryption_forced")}</Caption>
+                        {isEncryptionLoading ? (
+                            <InlineSpinner />
+                        ) : (
+                            <>
+                                <LabelledToggleSwitch
+                                    value={isEncrypted}
+                                    onChange={this.onEncryptionChange}
+                                    label={_t("common|encrypted")}
+                                    disabled={!canEnableEncryption}
+                                />
+                                {isEncryptionForceDisabled && !isEncrypted && (
+                                    <Caption>{_t("room_settings|security|encryption_forced")}</Caption>
+                                )}
+                                {encryptionSettings}
+                            </>
                         )}
-                        {encryptionSettings}
                     </SettingsFieldset>
-
                     {this.renderJoinRule()}
                     {historySection}
                 </SettingsSection>