refactor(feed-chat): reduce unnecessary DOM elements by conditionally…

… rendering MembersSidekick to improve performance

src/apps/feed/components/feed-chat/index.test.tsx

@@ -7,6 +7,7 @@ import { validateFeedChat } from '../../../../store/chat';
 import { send } from '../../../../store/messages';
 import { config } from '../../../../config';
 import { Spinner } from '@zero-tech/zui/components/LoadingIndicator';
+import { MembersSidekick } from '../../../../components/sidekick/variants/members-sidekick';
 
 describe('FeedChatContainer', () => {
   const subject = (props: any = {}) => {
@@ -135,6 +136,19 @@ describe('FeedChatContainer', () => {
     expect(validateFeedChat).toHaveBeenLastCalledWith(`new-zid:${config.matrixHomeServerName}`);
   });
 
+  it('should render members sidekick when is secondary sidekick open', () => {
+    const wrapper = subject({
+      zid: 'test-zid',
+      channel: { id: 'channel-id' },
+      activeConversationId: 'conversation-id',
+      isJoiningConversation: true,
+      isConversationsLoaded: true,
+      isSecondarySidekickOpen: true,
+    });
+
+    expect(wrapper).toHaveElement(MembersSidekick);
+  });
+
   describe('mapState', () => {
     const getState = (state: any) =>
       ({

src/apps/feed/components/feed-chat/index.tsx

@@ -209,7 +209,7 @@ export class Container extends React.Component<Properties> {
               {this.renderHeader()}{' '}
               {this.renderBody(this.props.isJoiningConversation || !this.props.isConversationsLoaded)}
             </Panel>
-            <MembersSidekick className={styles.MembersSidekick} />
+            {this.props.isSecondarySidekickOpen && <MembersSidekick className={styles.MembersSidekick} />}
           </>
         )}
       </>