From e5bc5a933e07bac4a4ef99ece0b01a1523c7374a Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Wed, 21 Jul 2021 16:09:32 +0200
Subject: [PATCH 1/3] Use cached value to read member count

---
 src/components/structures/MessagePanel.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx
index 5bfe759508..4ca38266dd 100644
--- a/src/components/structures/MessagePanel.tsx
+++ b/src/components/structures/MessagePanel.tsx
@@ -712,6 +712,8 @@ export default class MessagePanel extends React.Component<IProps, IState> {
 
         const callEventGrouper = this.callEventGroupers.get(mxEv.getContent().call_id);
 
+        const isDirectMessage = this.props.room?.getJoinedMemberCount() <= 2;
+
         // 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 +745,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={isDirectMessage && this.props.layout === Layout.Bubble}
                 />
             </TileErrorBoundary>,
         );

From 43d62aa8c1511920980a44d2943d1650a0da687a Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Wed, 21 Jul 2021 16:43:57 +0200
Subject: [PATCH 2/3] Use more performant getMembersCount to decide to hide or
 show sender

---
 src/components/structures/MessagePanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx
index 4ca38266dd..c014585529 100644
--- a/src/components/structures/MessagePanel.tsx
+++ b/src/components/structures/MessagePanel.tsx
@@ -712,7 +712,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
 
         const callEventGrouper = this.callEventGroupers.get(mxEv.getContent().call_id);
 
-        const isDirectMessage = this.props.room?.getJoinedMemberCount() <= 2;
+        const isDirectMessage = this.props.room?.getMembersCount() <= 2;
 
         // use txnId as key if available so that we don't remount during sending
         ret.push(

From 26ca41f699f87589e169df3cf76b1abb92bd2ac1 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Wed, 21 Jul 2021 17:26:41 +0200
Subject: [PATCH 3/3] Cache room member count on the messagePanel

---
 src/components/structures/MessagePanel.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx
index c014585529..39ede68a75 100644
--- a/src/components/structures/MessagePanel.tsx
+++ b/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,9 +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);
-
-        const isDirectMessage = this.props.room?.getMembersCount() <= 2;
-
         // use txnId as key if available so that we don't remount during sending
         ret.push(
             <TileErrorBoundary key={mxEv.getTxnId() || eventId} mxEvent={mxEv}>
@@ -745,7 +751,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
                     enableFlair={this.props.enableFlair}
                     showReadReceipts={this.props.showReadReceipts}
                     callEventGrouper={callEventGrouper}
-                    hideSender={isDirectMessage && this.props.layout === Layout.Bubble}
+                    hideSender={this.membersCount <= 2 && this.props.layout === Layout.Bubble}
                 />
             </TileErrorBoundary>,
         );