refactor(messenger-main): reduce unnecessary DOM elements by conditio…

…nally rendering MembersSidekick to improve performance (#2755)

src/apps/messenger/Main.test.tsx

@@ -5,6 +5,7 @@ import { Container as Main, Properties } from './Main';
 import { MessengerChat } from '../../components/messenger/chat';
 import { MessengerFeed } from '../../components/messenger/feed';
 import { JoiningConversationDialog } from '../../components/joining-conversation-dialog';
+import { MembersSidekick } from '../../components/sidekick/variants/members-sidekick';
 
 jest.mock('../../lib/web3/thirdweb/client', () => ({
   getThirdWebClient: jest.fn(),
@@ -23,6 +24,7 @@ describe(Main, () => {
       isSocialChannel: false,
       isJoiningConversation: false,
       isConversationsLoaded: true,
+      isSecondarySidekickOpen: false,
       ...props,
     };
 
@@ -105,4 +107,14 @@ describe(Main, () => {
 
     expect(wrapper).not.toHaveElement(MessengerFeed);
   });
+
+  it('should render members sidekick when is secondary sidekick open', () => {
+    const wrapper = subject({
+      context: { isAuthenticated: true },
+      isSecondarySidekickOpen: true,
+      isConversationsLoaded: true,
+    });
+
+    expect(wrapper).toHaveElement(MembersSidekick);
+  });
 });

src/apps/messenger/Main.tsx

@@ -22,12 +22,14 @@ export interface Properties {
   isSocialChannel: boolean;
   isJoiningConversation: boolean;
   isConversationsLoaded: boolean;
+  isSecondarySidekickOpen: boolean;
 }
 
 export class Container extends React.Component<Properties> {
   static mapState(state: RootState): Partial<Properties> {
     const {
       chat: { activeConversationId, isJoiningConversation, isConversationsLoaded },
+      groupManagement: { isSecondarySidekickOpen },
     } = state;
 
     const currentChannel = denormalize(activeConversationId, state) || null;
@@ -37,6 +39,7 @@ export class Container extends React.Component<Properties> {
       isSocialChannel: currentChannel?.isSocialChannel,
       isJoiningConversation,
       isConversationsLoaded,
+      isSecondarySidekickOpen,
     };
   }
 
@@ -57,7 +60,7 @@ export class Container extends React.Component<Properties> {
                 this.props.isValidConversation &&
                 (this.props.isSocialChannel ? <MessengerFeed /> : <MessengerChat />)}
             </div>
-            {this.props.isConversationsLoaded && <MembersSidekick />}
+            {this.props.isConversationsLoaded && this.props.isSecondarySidekickOpen && <MembersSidekick />}
 
             <FeatureFlag featureFlag='enableDevPanel'>
               <DevPanelContainer />