From 6c1bb091a6eaa041b40f1dd6ff6060dff6682a97 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 12 Jun 2024 13:10:50 +0100 Subject: [PATCH 1/2] Cache e2eStatus to avoid concerning unencrypted flicker when changing rooms Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/structures/RoomView.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index a15ddbf7742..b678e3cbb8a 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -400,6 +400,10 @@ function LocalRoomCreateLoader(props: ILocalRoomCreateLoaderProps): ReactElement } export class RoomView extends React.Component { + // We cache the latest computed e2eStatus per room to show as soon as we switch rooms otherwise defaulting to + // unencrypted causes a flicker which can yield confusion/concern in a larger room. + private static e2eStatusCache = new Map(); + private readonly askToJoinEnabled: boolean; private readonly dispatcherRef: string; private settingWatchers: string[]; @@ -1529,15 +1533,19 @@ export class RoomView extends React.Component { // If crypto is not currently enabled, we aren't tracking devices at all, // so we don't know what the answer is. Let's error on the safe side and show - // a warning for this case. - let e2eStatus = E2EStatus.Warning; + // a warning for this case.t + let e2eStatus = RoomView.e2eStatusCache.get(room.roomId) ?? E2EStatus.Warning; + // set the state immediately then update, so we don't scare the user into thinking the room is unencrypted + this.setState({ e2eStatus }); + if (this.context.client.isCryptoEnabled()) { + this.setState({ e2eStatus: E2EStatus.Normal }); /* At this point, the user has encryption on and cross-signing on */ e2eStatus = await shieldStatusForRoom(this.context.client, room); + RoomView.e2eStatusCache.set(room.roomId, e2eStatus); + if (this.unmounted) return; + this.setState({ e2eStatus }); } - - if (this.unmounted) return; - this.setState({ e2eStatus }); } private onUrlPreviewsEnabledChange = (): void => { From a2956942b16e77395d10a89f331aba73c328a849 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 13 Jun 2024 13:01:31 +0100 Subject: [PATCH 2/2] Update src/components/structures/RoomView.tsx --- src/components/structures/RoomView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index b678e3cbb8a..3c51bf53fd8 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -1533,7 +1533,7 @@ export class RoomView extends React.Component { // If crypto is not currently enabled, we aren't tracking devices at all, // so we don't know what the answer is. Let's error on the safe side and show - // a warning for this case.t + // a warning for this case. let e2eStatus = RoomView.e2eStatusCache.get(room.roomId) ?? E2EStatus.Warning; // set the state immediately then update, so we don't scare the user into thinking the room is unencrypted this.setState({ e2eStatus });