Merge branch 'develop' of https://github.com/vector-im/element-web into t3chguy/fix/20721

src/components/views/rooms/EventTile.tsx

@@ -757,6 +757,14 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                 case EventShieldReason.MISMATCHED_SENDER_KEY:
                     shieldReasonMessage = _t("encryption|event_shield_reason_mismatched_sender_key");
                     break;
+
+                case EventShieldReason.SENT_IN_CLEAR:
+                    shieldReasonMessage = _t("common|unencrypted");
+                    break;
+
+                case EventShieldReason.VERIFICATION_VIOLATION:
+                    shieldReasonMessage = _t("timeline|decryption_failure|sender_identity_previously_verified");
+                    break;
             }
 
             if (this.state.shieldColour === EventShieldColour.GREY) {

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>

src/components/views/verification/VerificationShowSas.tsx

@@ -14,7 +14,6 @@ import SasEmoji from "@matrix-org/spec/sas-emoji.json";
 import { _t, getNormalizedLanguageKeys, getUserLanguage } from "../../../languageHandler";
 import { PendingActionSpinner } from "../right_panel/EncryptionInfo";
 import AccessibleButton from "../elements/AccessibleButton";
-import { fixupColorFonts } from "../../../utils/FontManager";
 
 interface IProps {
     pending?: boolean;
@@ -88,11 +87,6 @@ export default class VerificationShowSas extends React.Component<IProps, IState>
         this.state = {
             pending: false,
         };
-
-        // As this component is also used before login (during complete security),
-        // also make sure we have a working emoji font to display the SAS emojis here.
-        // This is also done from LoggedInView.
-        fixupColorFonts();
     }
 
     private onMatchClick = (): void => {