Cache e2eStatus to avoid concerning unencrypted flicker when changing rooms (#12606)

* Cache e2eStatus to avoid concerning unencrypted flicker when changing rooms

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update src/components/structures/RoomView.tsx

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-06-13 17:25:44 +01:00 committed by GitHub
parent 347229be60
commit 24e3e08391
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -400,6 +400,10 @@ function LocalRoomCreateLoader(props: ILocalRoomCreateLoaderProps): ReactElement
} }
export class RoomView extends React.Component<IRoomProps, IRoomState> { export class RoomView extends React.Component<IRoomProps, IRoomState> {
// 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<string, E2EStatus>();
private readonly askToJoinEnabled: boolean; private readonly askToJoinEnabled: boolean;
private readonly dispatcherRef: string; private readonly dispatcherRef: string;
private settingWatchers: string[]; private settingWatchers: string[];
@ -1530,15 +1534,19 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
// If crypto is not currently enabled, we aren't tracking devices at all, // 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 // so we don't know what the answer is. Let's error on the safe side and show
// a warning for this case. // a warning for this case.
let e2eStatus = E2EStatus.Warning; 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()) { if (this.context.client.isCryptoEnabled()) {
this.setState({ e2eStatus: E2EStatus.Normal });
/* At this point, the user has encryption on and cross-signing on */ /* At this point, the user has encryption on and cross-signing on */
e2eStatus = await shieldStatusForRoom(this.context.client, room); e2eStatus = await shieldStatusForRoom(this.context.client, room);
} RoomView.e2eStatusCache.set(room.roomId, e2eStatus);
if (this.unmounted) return; if (this.unmounted) return;
this.setState({ e2eStatus }); this.setState({ e2eStatus });
} }
}
private onUrlPreviewsEnabledChange = (): void => { private onUrlPreviewsEnabledChange = (): void => {
if (this.state.room) { if (this.state.room) {