Render dropdown menu items lazily (#6437)

src/view/com/util/forms/PostDropdownBtn.tsx

@@ -102,12 +102,77 @@ let PostDropdownBtn = ({
   timestamp: string
   threadgateRecord?: AppBskyFeedThreadgate.Record
 }): React.ReactNode => {
-  const {hasSession, currentAccount} = useSession()
   const theme = useTheme()
   const alf = useAlf()
-  const {gtMobile} = useBreakpoints()
   const {_} = useLingui()
   const defaultCtrlColor = theme.palette.default.postCtrl
+  return (
+    <EventStopper onKeyDown={false}>
+      <Menu.Root>
+        <Menu.Trigger label={_(msg`Open post options menu`)}>
+          {({props, state}) => {
+            return (
+              <Pressable
+                {...props}
+                hitSlop={hitSlop}
+                testID={testID}
+                style={[
+                  style,
+                  a.rounded_full,
+                  (state.hovered || state.pressed) && [
+                    alf.atoms.bg_contrast_25,
+                  ],
+                ]}>
+                <DotsHorizontal
+                  fill={defaultCtrlColor}
+                  style={{pointerEvents: 'none'}}
+                  size={size}
+                />
+              </Pressable>
+            )
+          }}
+        </Menu.Trigger>
+        <Menu.Outer>
+          <PostDropdownMenuItems
+            testID={testID}
+            post={post}
+            postFeedContext={postFeedContext}
+            record={record}
+            richText={richText}
+            timestamp={timestamp}
+            threadgateRecord={threadgateRecord}
+          />
+        </Menu.Outer>
+      </Menu.Root>
+    </EventStopper>
+  )
+}
+
+PostDropdownBtn = memo(PostDropdownBtn)
+export {PostDropdownBtn}
+
+let PostDropdownMenuItems = ({
+  post,
+  postFeedContext,
+  record,
+  richText,
+  timestamp,
+  threadgateRecord,
+}: {
+  testID: string
+  post: Shadow<AppBskyFeedDefs.PostView>
+  postFeedContext: string | undefined
+  record: AppBskyFeedPost.Record
+  richText: RichTextAPI
+  style?: StyleProp<ViewStyle>
+  hitSlop?: PressableProps['hitSlop']
+  size?: 'lg' | 'md' | 'sm'
+  timestamp: string
+  threadgateRecord?: AppBskyFeedThreadgate.Record
+}): React.ReactNode => {
+  const {hasSession, currentAccount} = useSession()
+  const {gtMobile} = useBreakpoints()
+  const {_} = useLingui()
   const langPrefs = useLanguagePrefs()
   const {mutateAsync: deletePostMutate} = usePostDeleteMutation()
   const {mutateAsync: pinPostMutate, isPending: isPinPending} =
@@ -360,33 +425,7 @@ let PostDropdownBtn = ({
   }, [isPinned, pinPostMutate, postCid, postUri])
 
   return (
-    <EventStopper onKeyDown={false}>
+    <>
-      <Menu.Root>
-        <Menu.Trigger label={_(msg`Open post options menu`)}>
-          {({props, state}) => {
-            return (
-              <Pressable
-                {...props}
-                hitSlop={hitSlop}
-                testID={testID}
-                style={[
-                  style,
-                  a.rounded_full,
-                  (state.hovered || state.pressed) && [
-                    alf.atoms.bg_contrast_25,
-                  ],
-                ]}>
-                <DotsHorizontal
-                  fill={defaultCtrlColor}
-                  style={{pointerEvents: 'none'}}
-                  size={size}
-                />
-              </Pressable>
-            )
-          }}
-        </Menu.Trigger>
-
-        <Menu.Outer>
       {isAuthor && (
         <>
           <Menu.Group>
@@ -508,9 +547,7 @@ let PostDropdownBtn = ({
               }
               onPress={onToggleThreadMute}>
               <Menu.ItemText>
-                    {isThreadMuted
+                {isThreadMuted ? _(msg`Unmute thread`) : _(msg`Mute thread`)}
-                      ? _(msg`Unmute thread`)
-                      : _(msg`Mute thread`)}
               </Menu.ItemText>
               <Menu.ItemIcon
                 icon={isThreadMuted ? Unmute : Mute}
@@ -630,9 +667,7 @@ let PostDropdownBtn = ({
                 <Menu.Item
                   testID="postDropdownEditPostInteractions"
                   label={_(msg`Edit interaction settings`)}
-                      onPress={() =>
+                  onPress={() => postInteractionSettingsDialogControl.open()}
-                        postInteractionSettingsDialogControl.open()
-                      }
                   {...(isAuthor
                     ? Platform.select({
                         web: {
@@ -660,8 +695,6 @@ let PostDropdownBtn = ({
           </Menu.Group>
         </>
       )}
-        </Menu.Outer>
-      </Menu.Root>
 
       <Prompt.Basic
         control={deletePromptControl}
@@ -745,9 +778,7 @@ let PostDropdownBtn = ({
         onConfirm={onToggleReplyVisibility}
         confirmButtonCta={_(msg`Yes, hide`)}
       />
-    </EventStopper>
+    </>
   )
 }
-
+PostDropdownMenuItems = memo(PostDropdownMenuItems)
-PostDropdownBtn = memo(PostDropdownBtn)
-export {PostDropdownBtn}