Fix TagMenu initial render perf (#6483)

* Split tag menu dialog content

* Log the actual error please

* Fix it on native

src/components/Dialog/index.tsx

@@ -75,7 +75,7 @@ export function Outer({
       try {
         cb()
       } catch (e: any) {
-        logger.error('Error running close callback', e)
+        logger.error(e || 'Error running close callback')
       }
     }
 

src/components/TagMenu/index.tsx

@@ -40,9 +40,37 @@ export function TagMenu({
   tag: string
   authorHandle?: string
 }>) {
+  const navigation = useNavigation<NavigationProp>()
+  return (
+    <>
+      {children}
+      <Dialog.Outer control={control}>
+        <Dialog.Handle />
+        <TagMenuInner
+          control={control}
+          tag={tag}
+          authorHandle={authorHandle}
+          navigation={navigation}
+        />
+      </Dialog.Outer>
+    </>
+  )
+}
+
+function TagMenuInner({
+  control,
+  tag,
+  authorHandle,
+  navigation,
+}: {
+  control: Dialog.DialogOuterProps['control']
+  tag: string
+  authorHandle?: string
+  // Passed down because on native, we don't use real portals (and context would be wrong).
+  navigation: NavigationProp
+}) {
   const {_} = useLingui()
   const t = useTheme()
-  const navigation = useNavigation<NavigationProp>()
   const {isLoading: isPreferencesLoading, data: preferences} =
     usePreferencesQuery()
   const {
@@ -79,11 +107,6 @@ export function TagMenu({
   }, [tag, preferences?.moderationPrefs?.mutedWords])
 
   return (
-    <>
-      {children}
-
-      <Dialog.Outer control={control}>
-        <Dialog.Handle />
     <Dialog.Inner label={_(msg`Tag menu: ${displayTag}`)}>
       {isPreferencesLoading ? (
         <View style={[a.w_full, a.align_center]}>
@@ -166,10 +189,7 @@ export function TagMenu({
                       a.px_lg,
                       a.py_md,
                     ]}>
-                        <Person
-                          size="lg"
-                          style={[t.atoms.text_contrast_medium]}
-                        />
+                    <Person size="lg" style={[t.atoms.text_contrast_medium]} />
                     <Text
                       numberOfLines={1}
                       ellipsizeMode="middle"
@@ -182,8 +202,7 @@ export function TagMenu({
                       ]}>
                       <Trans>
                         See{' '}
-                            <Text
-                              style={[a.text_md, a.font_bold, t.atoms.text]}>
+                        <Text style={[a.text_md, a.font_bold, t.atoms.text]}>
                           {displayTag}
                         </Text>{' '}
                         posts by this user
@@ -231,10 +250,7 @@ export function TagMenu({
                       a.px_lg,
                       a.py_md,
                     ]}>
-                        <Mute
-                          size="lg"
-                          style={[t.atoms.text_contrast_medium]}
-                        />
+                    <Mute size="lg" style={[t.atoms.text_contrast_medium]} />
                     <Text
                       numberOfLines={1}
                       ellipsizeMode="middle"
@@ -270,7 +286,5 @@ export function TagMenu({
         </>
       )}
     </Dialog.Inner>
-      </Dialog.Outer>
-    </>
   )
 }