Remove async call to get virtual room from room load (#9743)

* remove async call to get virtual room from room load

* dont init timeline twice when overlay and focused event both change

* strict error

* prettier

Author: Kerry

src/components/structures/RoomView.tsx

@@ -658,12 +658,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         // NB: This does assume that the roomID will not change for the lifetime of
         // the RoomView instance
         if (initial) {
-            const virtualRoom = newState.roomId
-                ? await VoipUserMapper.sharedInstance().getVirtualRoomForRoom(newState.roomId)
-                : undefined;
-
             newState.room = this.context.client!.getRoom(newState.roomId) || undefined;
-            newState.virtualRoom = virtualRoom || undefined;
             if (newState.room) {
                 newState.showApps = this.shouldShowApps(newState.room);
                 this.onRoomLoaded(newState.room);
@@ -1208,6 +1203,12 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         return this.messagePanel.canResetTimeline();
     };
 
+    private loadVirtualRoom = async (room?: Room): Promise<void> => {
+        const virtualRoom = room?.roomId && (await VoipUserMapper.sharedInstance().getVirtualRoomForRoom(room?.roomId));
+
+        this.setState({ virtualRoom: virtualRoom || undefined });
+    };
+
     // called when state.room is first initialised (either at initial load,
     // after a successful peek, or after we join the room).
     private onRoomLoaded = (room: Room) => {
@@ -1222,6 +1223,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         this.updateE2EStatus(room);
         this.updatePermissions(room);
         this.checkWidgets(room);
+        this.loadVirtualRoom(room);
 
         if (
             this.getMainSplitContentType(room) !== MainSplitContentType.Timeline &&
@@ -1288,7 +1290,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         });
     }
 
-    private onRoom = async (room: Room) => {
+    private onRoom = (room: Room) => {
         if (!room || room.roomId !== this.state.roomId) {
             return;
         }
@@ -1301,11 +1303,9 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             );
         }
 
-        const virtualRoom = await VoipUserMapper.sharedInstance().getVirtualRoomForRoom(room.roomId);
         this.setState(
             {
                 room: room,
-                virtualRoom: virtualRoom || undefined,
             },
             () => {
                 this.onRoomLoaded(room);

src/components/structures/TimelinePanel.tsx

@@ -342,12 +342,16 @@ class TimelinePanel extends React.Component<IProps, IState> {
         const differentEventId = prevProps.eventId != this.props.eventId;
         const differentHighlightedEventId = prevProps.highlightedEventId != this.props.highlightedEventId;
         const differentAvoidJump = prevProps.eventScrollIntoView && !this.props.eventScrollIntoView;
+        const differentOverlayTimeline = prevProps.overlayTimelineSet !== this.props.overlayTimelineSet;
         if (differentEventId || differentHighlightedEventId || differentAvoidJump) {
             logger.log(
                 `TimelinePanel switching to eventId ${this.props.eventId} (was ${prevProps.eventId}), ` +
                     `scrollIntoView: ${this.props.eventScrollIntoView} (was ${prevProps.eventScrollIntoView})`,
             );
             this.initTimeline(this.props);
+        } else if (differentOverlayTimeline) {
+            logger.log(`TimelinePanel updating overlay timeline.`);
+            this.initTimeline(this.props);
         }
     }