Move hideSender logic into state so it causes re-render (#7413)

* Move hideSender logic into state so it causes re-render

* change method signature

src/components/structures/MessagePanel.tsx

@@ -186,6 +186,7 @@ interface IProps {
 interface IState {
     ghostReadMarkers: string[];
     showTypingNotifications: boolean;
+    hideSender: boolean;
 }
 
 interface IReadReceiptForUser {
@@ -254,8 +255,6 @@ 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);
 
@@ -264,6 +263,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
             // display 'ghost' read markers that are animating away
             ghostReadMarkers: [],
             showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
+            hideSender: this.shouldHideSender(),
         };
 
         // Cache hidden events setting on mount since Settings is expensive to
@@ -306,8 +306,14 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         }
     }
 
+    private shouldHideSender(): boolean {
+        return this.props.room?.getInvitedAndJoinedMemberCount() <= 2 && this.props.layout === Layout.Bubble;
+    }
+
     private calculateRoomMembersCount = (): void => {
-        this.membersCount = this.props.room?.getMembers().length || 0;
+        this.setState({
+            hideSender: this.shouldHideSender(),
+        });
     };
 
     private onShowTypingNotificationsChange = (): void => {
@@ -794,7 +800,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
                     enableFlair={this.props.enableFlair}
                     showReadReceipts={this.props.showReadReceipts}
                     callEventGrouper={callEventGrouper}
-                    hideSender={this.membersCount <= 2 && this.props.layout === Layout.Bubble}
+                    hideSender={this.state.hideSender}
                     timelineRenderingType={this.context.timelineRenderingType}
                 />
             </TileErrorBoundary>,