make convo menu lazy (#7604)

src/components/dms/ConvoMenu.tsx

@@ -38,7 +38,7 @@ import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '../icons/Bubble'
 import {ReportDialog} from './ReportDialog'
 
 let ConvoMenu = ({
-  convo: initialConvo,
+  convo,
   profile,
   control,
   currentScreen,
@@ -61,12 +61,105 @@ let ConvoMenu = ({
   latestReportableMessage?: ChatBskyConvoDefs.MessageView
   style?: ViewStyleProp['style']
 }): React.ReactNode => {
-  const navigation = useNavigation<NavigationProp>()
   const {_} = useLingui()
   const t = useTheme()
+
   const leaveConvoControl = Prompt.usePromptControl()
   const reportControl = Prompt.usePromptControl()
   const blockedByListControl = Prompt.usePromptControl()
+
+  const {listBlocks} = blockInfo
+
+  return (
+    <>
+      <Menu.Root control={control}>
+        {!hideTrigger && (
+          <View style={[style]}>
+            <Menu.Trigger label={_(msg`Chat settings`)}>
+              {({props, state}) => (
+                <Pressable
+                  {...props}
+                  onPress={() => {
+                    Keyboard.dismiss()
+                    props.onPress()
+                  }}
+                  style={[
+                    a.p_sm,
+                    a.rounded_full,
+                    (state.hovered || state.pressed) && t.atoms.bg_contrast_25,
+                    // make sure pfp is in the middle
+                    {marginLeft: -10},
+                  ]}>
+                  <DotsHorizontal size="md" style={t.atoms.text} />
+                </Pressable>
+              )}
+            </Menu.Trigger>
+          </View>
+        )}
+
+        <Menu.Outer>
+          <MenuContent
+            profile={profile}
+            showMarkAsRead={showMarkAsRead}
+            blockInfo={blockInfo}
+            convo={convo}
+            leaveConvoControl={leaveConvoControl}
+            reportControl={reportControl}
+            blockedByListControl={blockedByListControl}
+          />
+        </Menu.Outer>
+      </Menu.Root>
+
+      <LeaveConvoPrompt
+        control={leaveConvoControl}
+        convoId={convo.id}
+        currentScreen={currentScreen}
+      />
+      {latestReportableMessage ? (
+        <ReportDialog
+          currentScreen={currentScreen}
+          params={{
+            type: 'convoMessage',
+            convoId: convo.id,
+            message: latestReportableMessage,
+          }}
+          control={reportControl}
+        />
+      ) : (
+        <ReportConversationPrompt control={reportControl} />
+      )}
+
+      <BlockedByListDialog
+        control={blockedByListControl}
+        listBlocks={listBlocks}
+      />
+    </>
+  )
+}
+ConvoMenu = React.memo(ConvoMenu)
+
+function MenuContent({
+  convo: initialConvo,
+  profile,
+  showMarkAsRead,
+  blockInfo,
+  leaveConvoControl,
+  reportControl,
+  blockedByListControl,
+}: {
+  convo: ChatBskyConvoDefs.ConvoView
+  profile: Shadow<AppBskyActorDefs.ProfileViewBasic>
+  showMarkAsRead?: boolean
+  blockInfo: {
+    listBlocks: ModerationCause[]
+    userBlock?: ModerationCause
+  }
+  leaveConvoControl: Prompt.PromptControlProps
+  reportControl: Prompt.PromptControlProps
+  blockedByListControl: Prompt.PromptControlProps
+}) {
+  const navigation = useNavigation<NavigationProp>()
+  const {_} = useLingui()
   const {mutate: markAsRead} = useMarkAsReadMutation()
 
   const {listBlocks, userBlock} = blockInfo
@@ -108,36 +201,7 @@ let ConvoMenu = ({
     }
   }, [userBlock, listBlocks, blockedByListControl, queueBlock, queueUnblock])
 
-  return (
+  return isDeletedAccount ? (
-    <>
-      <Menu.Root control={control}>
-        {!hideTrigger && (
-          <View style={[style]}>
-            <Menu.Trigger label={_(msg`Chat settings`)}>
-              {({props, state}) => (
-                <Pressable
-                  {...props}
-                  onPress={() => {
-                    Keyboard.dismiss()
-
-                    props.onPress()
-                  }}
-                  style={[
-                    a.p_sm,
-                    a.rounded_full,
-                    (state.hovered || state.pressed) && t.atoms.bg_contrast_25,
-                    // make sure pfp is in the middle
-                    {marginLeft: -10},
-                  ]}>
-                  <DotsHorizontal size="md" style={t.atoms.text} />
-                </Pressable>
-              )}
-            </Menu.Trigger>
-          </View>
-        )}
-
-        {isDeletedAccount ? (
-          <Menu.Outer>
     <Menu.Item
       label={_(msg`Leave conversation`)}
       onPress={() => leaveConvoControl.open()}>
@@ -146,9 +210,8 @@ let ConvoMenu = ({
       </Menu.ItemText>
       <Menu.ItemIcon icon={ArrowBoxLeft} />
     </Menu.Item>
-          </Menu.Outer>
   ) : (
-          <Menu.Outer>
+    <>
       <Menu.Group>
         {showMarkAsRead && (
           <Menu.Item
@@ -184,9 +247,7 @@ let ConvoMenu = ({
       <Menu.Divider />
       <Menu.Group>
         <Menu.Item
-                label={
+          label={isBlocking ? _(msg`Unblock account`) : _(msg`Block account`)}
-                  isBlocking ? _(msg`Unblock account`) : _(msg`Block account`)
-                }
           onPress={toggleBlock}>
           <Menu.ItemText>
             {isBlocking ? _(msg`Unblock account`) : _(msg`Block account`)}
@@ -213,36 +274,8 @@ let ConvoMenu = ({
           <Menu.ItemIcon icon={ArrowBoxLeft} />
         </Menu.Item>
       </Menu.Group>
-          </Menu.Outer>
-        )}
-      </Menu.Root>
-
-      <LeaveConvoPrompt
-        control={leaveConvoControl}
-        convoId={convoId}
-        currentScreen={currentScreen}
-      />
-      {latestReportableMessage ? (
-        <ReportDialog
-          currentScreen={currentScreen}
-          params={{
-            type: 'convoMessage',
-            convoId: convoId,
-            message: latestReportableMessage,
-          }}
-          control={reportControl}
-        />
-      ) : (
-        <ReportConversationPrompt control={reportControl} />
-      )}
-
-      <BlockedByListDialog
-        control={blockedByListControl}
-        listBlocks={listBlocks}
-      />
     </>
   )
 }
-ConvoMenu = React.memo(ConvoMenu)
 
 export {ConvoMenu}