Merge pull request #6429 from matrix-org/gsouquet/fix-18146

Author: germain-gg

src/components/structures/MessagePanel.tsx

@@ -236,6 +236,8 @@ export default class MessagePanel extends React.Component<IProps, IState> {
     // A map of <callId, CallEventGrouper>
     private callEventGroupers = new Map<string, CallEventGrouper>();
 
+    private membersCount = 0;
+
     constructor(props, context) {
         super(props, context);
 
@@ -256,11 +258,14 @@ export default class MessagePanel extends React.Component<IProps, IState> {
     }
 
     componentDidMount() {
+        this.calculateRoomMembersCount();
+        this.props.room?.on("RoomState.members", this.calculateRoomMembersCount);
         this.isMounted = true;
     }
 
     componentWillUnmount() {
         this.isMounted = false;
+        this.props.room?.off("RoomState.members", this.calculateRoomMembersCount);
         SettingsStore.unwatchSetting(this.showTypingNotificationsWatcherRef);
     }
 
@@ -274,6 +279,10 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         }
     }
 
+    private calculateRoomMembersCount = (): void => {
+        this.membersCount = this.props.room?.getMembers().length || 0;
+    };
+
     private onShowTypingNotificationsChange = (): void => {
         this.setState({
             showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
@@ -711,7 +720,6 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         isLastSuccessful = isLastSuccessful && mxEv.getSender() === MatrixClientPeg.get().getUserId();
 
         const callEventGrouper = this.callEventGroupers.get(mxEv.getContent().call_id);
-
         // use txnId as key if available so that we don't remount during sending
         ret.push(
             <TileErrorBoundary key={mxEv.getTxnId() || eventId} mxEvent={mxEv}>
@@ -743,7 +751,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
                     enableFlair={this.props.enableFlair}
                     showReadReceipts={this.props.showReadReceipts}
                     callEventGrouper={callEventGrouper}
-                    hideSender={this.props.room?.getMembers().length <= 2 && this.props.layout === Layout.Bubble}
+                    hideSender={this.membersCount <= 2 && this.props.layout === Layout.Bubble}
                 />
             </TileErrorBoundary>,
         );