Optimize native tag input

src/components/TagMenu/index.tsx

@@ -23,6 +23,16 @@ import {
 import {Loader} from '#/components/Loader'
 import {isInvalidHandle} from '#/lib/strings/handles'
 
+type TagMenuProps = {
+  control: Dialog.DialogOuterProps['control']
+  /**
+   * This should be the sanitized tag value from the facet itself, not the
+   * "display" value with a leading `#`.
+   */
+  tag: string
+  authorHandle?: string
+}
+
 export function useTagMenuControl() {
   return Dialog.useDialogControl()
 }
@@ -32,15 +42,20 @@ export function TagMenu({
   control,
   tag,
   authorHandle,
-}: React.PropsWithChildren<{
-  control: Dialog.DialogOuterProps['control']
-  /**
-   * This should be the sanitized tag value from the facet itself, not the
-   * "display" value with a leading `#`.
-   */
-  tag: string
-  authorHandle?: string
-}>) {
+}: React.PropsWithChildren<TagMenuProps>) {
+  return (
+    <>
+      {children}
+
+      <Dialog.Outer control={control}>
+        <Dialog.Handle />
+        <TagMenuInner control={control} tag={tag} authorHandle={authorHandle} />
+      </Dialog.Outer>
+    </>
+  )
+}
+
+function TagMenuInner({control, tag, authorHandle}: TagMenuProps) {
   const {_} = useLingui()
   const t = useTheme()
   const navigation = useNavigation<NavigationProp>()
@@ -69,12 +84,6 @@ export function TagMenu({
   )
 
   return (
-    <>
-      {children}
-
-      <Dialog.Outer control={control}>
-        <Dialog.Handle />
-
     <Dialog.Inner label={_(msg`Tag menu: ${displayTag}`)}>
       {isPreferencesLoading ? (
         <View style={[a.w_full, a.align_center]}>
@@ -170,10 +179,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"
@@ -186,8 +192,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
@@ -232,10 +237,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"
@@ -269,7 +271,5 @@ export function TagMenu({
         </>
       )}
     </Dialog.Inner>
-      </Dialog.Outer>
-    </>
   )
 }