adding more register usage (utils)

src/view/com/post-thread/PostThreadItem/PostThreadItem.tsx

@@ -8,7 +8,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {PostThreadViewPostModel} from '../../../../state/models/post-thread-view'
 import {Link} from '../../util/Link'
 import {RichText} from '../../util/RichText'
-import {PostDropdownBtn} from '../../util/DropdownBtn'
+import PostDropdownBtn from '../../util/DropdownBtn/PostDropdownBtn'
 import * as Toast from '../../util/Toast'
 import {UserAvatar} from '../../util/UserAvatar'
 import {s, colors} from '../../../lib/styles'

src/view/com/util/BottomSheetCustomBackdrop/BottomSheetCustomBackdrop.tsx

@@ -7,7 +7,7 @@ import Animated, {
   useAnimatedStyle,
 } from 'react-native-reanimated'
 
-export function createCustomBackdrop(
+export default function createCustomBackdrop(
   onClose?: ((event: GestureResponderEvent) => void) | undefined,
 ): React.FC<BottomSheetBackdropProps> {
   const CustomBackdrop = ({animatedIndex, style}: BottomSheetBackdropProps) => {

src/view/com/util/BottomSheetCustomBackdrop/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const BottomSheetCustomBackdrop = register({
+  loader: () => import('./BottomSheetCustomBackdrop'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/util/DropdownBtn/DropdownBtn.tsx

@@ -1,6 +1,5 @@
 import React, {useRef} from 'react'
 import {
-  Share,
   StyleProp,
   StyleSheet,
   Text,
@@ -12,11 +11,6 @@ import {
 import {IconProp} from '@fortawesome/fontawesome-svg-core'
 import RootSiblings from 'react-native-root-siblings'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {colors} from '../../lib/styles'
-import {toShareUrl} from '../../../lib/strings'
-import {useStores} from '../../../state'
-import {ConfirmModel} from '../../../state/models/shell-ui'
-import {TABS_ENABLED} from '../../../build-flags'
 
 const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
 
@@ -26,7 +20,7 @@ export interface DropdownItem {
   onPress: () => void
 }
 
-export function DropdownBtn({
+export default function DropdownBtn({
   style,
   items,
   menuWidth,
@@ -73,73 +67,6 @@ export function DropdownBtn({
   )
 }
 
-export function PostDropdownBtn({
-  style,
-  children,
-  itemHref,
-  itemTitle,
-  isAuthor,
-  onCopyPostText,
-  onDeletePost,
-}: {
-  style?: StyleProp<ViewStyle>
-  children?: React.ReactNode
-  itemHref: string
-  itemTitle: string
-  isAuthor: boolean
-  onCopyPostText: () => void
-  onDeletePost: () => void
-}) {
-  const store = useStores()
-
-  const dropdownItems: DropdownItem[] = [
-    TABS_ENABLED
-      ? {
-          icon: ['far', 'clone'],
-          label: 'Open in new tab',
-          onPress() {
-            store.nav.newTab(itemHref)
-          },
-        }
-      : undefined,
-    {
-      icon: ['far', 'paste'],
-      label: 'Copy post text',
-      onPress() {
-        onCopyPostText()
-      },
-    },
-    {
-      icon: 'share',
-      label: 'Share...',
-      onPress() {
-        Share.share({url: toShareUrl(itemHref)})
-      },
-    },
-    isAuthor
-      ? {
-          icon: ['far', 'trash-can'],
-          label: 'Delete post',
-          onPress() {
-            store.shell.openModal(
-              new ConfirmModel(
-                'Delete this post?',
-                'Are you sure? This can not be undone.',
-                onDeletePost,
-              ),
-            )
-          },
-        }
-      : undefined,
-  ].filter(Boolean) as DropdownItem[]
-
-  return (
-    <DropdownBtn style={style} items={dropdownItems} menuWidth={200}>
-      {children}
-    </DropdownBtn>
-  )
-}
-
 function createDropdownMenu(
   x: number,
   y: number,

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

@@ -0,0 +1,74 @@
+import React from 'react'
+import {Share, StyleProp, ViewStyle} from 'react-native'
+import {toShareUrl} from '../../../../lib/strings'
+import {useStores} from '../../../../state'
+import {ConfirmModel} from '../../../../state/models/shell-ui'
+import {TABS_ENABLED} from '../../../../build-flags'
+import DropdownBtn, {DropdownItem} from './DropdownBtn'
+
+export default function PostDropdownBtn({
+  style,
+  children,
+  itemHref,
+  itemTitle,
+  isAuthor,
+  onCopyPostText,
+  onDeletePost,
+}: {
+  style?: StyleProp<ViewStyle>
+  children?: React.ReactNode
+  itemHref: string
+  itemTitle: string
+  isAuthor: boolean
+  onCopyPostText: () => void
+  onDeletePost: () => void
+}) {
+  const store = useStores()
+
+  const dropdownItems: DropdownItem[] = [
+    TABS_ENABLED
+      ? {
+          icon: ['far', 'clone'],
+          label: 'Open in new tab',
+          onPress() {
+            store.nav.newTab(itemHref)
+          },
+        }
+      : undefined,
+    {
+      icon: ['far', 'paste'],
+      label: 'Copy post text',
+      onPress() {
+        onCopyPostText()
+      },
+    },
+    {
+      icon: 'share',
+      label: 'Share...',
+      onPress() {
+        Share.share({url: toShareUrl(itemHref)})
+      },
+    },
+    isAuthor
+      ? {
+          icon: ['far', 'trash-can'],
+          label: 'Delete post',
+          onPress() {
+            store.shell.openModal(
+              new ConfirmModel(
+                'Delete this post?',
+                'Are you sure? This can not be undone.',
+                onDeletePost,
+              ),
+            )
+          },
+        }
+      : undefined,
+  ].filter(Boolean) as DropdownItem[]
+
+  return (
+    <DropdownBtn style={style} items={dropdownItems} menuWidth={200}>
+      {children}
+    </DropdownBtn>
+  )
+}

src/view/com/util/DropdownBtn/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const DropdownBtn = register({
+  loader: () => import('./DropdownBtn'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/util/EmptyState/EmptyState.tsx

@@ -2,10 +2,10 @@ import React from 'react'
 import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native'
 import {IconProp} from '@fortawesome/fontawesome-svg-core'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {UserGroupIcon} from '../../lib/icons'
-import {colors} from '../../lib/styles'
+import {UserGroupIcon} from '../../../lib/icons'
+import {colors} from '../../../lib/styles'
 
-export function EmptyState({
+export default function EmptyState({
   icon,
   message,
   style,

src/view/com/util/EmptyState/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const EmptyState = register({
+  loader: () => import('./EmptyState'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/util/ErrorMessage/ErrorMessage.tsx

@@ -9,9 +9,9 @@ import {
 } from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import LinearGradient from 'react-native-linear-gradient'
-import {colors, gradients} from '../../lib/styles'
+import {colors, gradients} from '../../../lib/styles'
 
-export function ErrorMessage({
+export default function ErrorMessage({
   message,
   numberOfLines,
   dark,

src/view/com/util/ErrorMessage/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const ErrorMessage = register({
+  loader: () => import('./ErrorMessage'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/util/ErrorScreen/ErrorScreen.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {colors} from '../../lib/styles'
+import {colors} from '../../../lib/styles'
 
-export function ErrorScreen({
+export default function ErrorScreen({
   title,
   message,
   details,

src/view/com/util/ErrorScreen/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const ErrorScreen = register({
+  loader: () => import('./ErrorScreen'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/util/FloatingActionButton/FloatingActionButton.tsx

@@ -8,11 +8,17 @@ import {
 import LinearGradient from 'react-native-linear-gradient'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {IconProp} from '@fortawesome/fontawesome-svg-core'
-import {colors, gradients} from '../../lib/styles'
-import * as zIndex from '../../lib/z-index'
+import {colors, gradients} from '../../../lib/styles'
+import * as zIndex from '../../../lib/z-index'
 
 type OnPress = ((event: GestureResponderEvent) => void) | undefined
-export function FAB({icon, onPress}: {icon: IconProp; onPress: OnPress}) {
+export default function FAB({
+  icon,
+  onPress,
+}: {
+  icon: IconProp
+  onPress: OnPress
+}) {
   return (
     <TouchableWithoutFeedback onPress={onPress}>
       <View style={styles.outer}>

src/view/com/util/FloatingActionButton/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const FAB = register({
+  loader: () => import('./FloatingActionButton'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/util/Link/Link.tsx

@@ -8,10 +8,10 @@ import {
   TextStyle,
   ViewStyle,
 } from 'react-native'
-import {useStores, RootStoreModel} from '../../../state'
-import {convertBskyAppUrlIfNeeded} from '../../../lib/strings'
+import {useStores, RootStoreModel} from '../../../../state'
+import {convertBskyAppUrlIfNeeded} from '../../../../lib/strings'
 
-export const Link = observer(function Link({
+export default observer(function Link({
   style,
   href,
   title,

src/view/com/util/Link/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const TextLink = register({
+  loader: () => import('./Link'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/util/LoadingPlaceholder/LoadingPlaceholder.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import {StyleSheet, StyleProp, View, ViewStyle} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {UpIcon} from '../../lib/icons'
-import {s, colors} from '../../lib/styles'
+import {UpIcon} from '../../../lib/icons'
+import {s, colors} from '../../../lib/styles'
 
 export function LoadingPlaceholder({
   width,
@@ -36,7 +36,7 @@ export function LoadingPlaceholder({
   )
 }
 
-export function PostLoadingPlaceholder({
+export default function PostLoadingPlaceholder({
   style,
 }: {
   style?: StyleProp<ViewStyle>

src/view/com/util/LoadingPlaceholder/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const LoadingPlaceholder = register({
+  loader: () => import('./LoadingPlaceholder'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/util/Picker/Picker.tsx

@@ -14,7 +14,7 @@ import {
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
 import RootSiblings from 'react-native-root-siblings'
-import {colors} from '../../lib/styles'
+import {colors} from '../../../lib/styles'
 
 interface PickerItem {
   value: string
@@ -33,7 +33,7 @@ interface PickerOpts {
 
 const MENU_WIDTH = 200
 
-export function Picker({
+export default function Picker({
   style,
   labelStyle,
   iconStyle,

src/view/com/util/Picker/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const Picker = register({
+  loader: () => import('./Picker'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/util/PostCtrls/PostCtrls.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import {Animated, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {UpIcon, UpIconSolid} from '../../lib/icons'
-import {s, colors} from '../../lib/styles'
-import {useAnimatedValue} from '../../lib/useAnimatedValue'
+import {UpIcon, UpIconSolid} from '../../../lib/icons'
+import {s, colors} from '../../../lib/styles'
+import {useAnimatedValue} from '../../../lib/useAnimatedValue'
 
 interface PostCtrlsOpts {
   big?: boolean
@@ -21,7 +21,7 @@ const redgray = '#7A6161'
 const sRedgray = {color: redgray}
 const HITSLOP = {top: 10, left: 10, bottom: 10, right: 10}
 
-export function PostCtrls(opts: PostCtrlsOpts) {
+export default function PostCtrls(opts: PostCtrlsOpts) {
   const interp1 = useAnimatedValue(0)
   const interp2 = useAnimatedValue(0)
 

src/view/com/util/PostCtrls/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const PostCtrls = register({
+  loader: () => import('./PostCtrls'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/util/PostEmbeds/PostEmbeds.tsx

@@ -7,13 +7,13 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
-import {Entity} from '../../../third-party/api/src/client/types/app/bsky/feed/post'
-import {Link} from '../util/Link'
-import {LinkMeta, getLikelyType, LikelyType} from '../../../lib/link-meta'
-import {colors} from '../../lib/styles'
-import {useStores} from '../../../state'
+import {Entity} from '../../../../third-party/api/src/client/types/app/bsky/feed/post'
+import {Link} from '../../util/Link'
+import {LinkMeta, getLikelyType, LikelyType} from '../../../../lib/link-meta'
+import {colors} from '../../../lib/styles'
+import {useStores} from '../../../../state'
 
-export function PostEmbeds({
+export default function PostEmbeds({
   entities,
   style,
 }: {

src/view/com/util/PostEmbeds/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const PostEmbeds = register({
+  loader: () => import('./PostEmbeds'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/util/PostMeta/PostMeta.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import {StyleSheet, Text, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {Link} from '../util/Link'
-import {PostDropdownBtn} from '../util/DropdownBtn'
-import {s} from '../../lib/styles'
-import {ago} from '../../../lib/strings'
+import {Link} from '../../util/Link'
+import PostDropdownBtn from '../DropdownBtn/PostDropdownBtn'
+import {s} from '../../../lib/styles'
+import {ago} from '../../../../lib/strings'
 
 interface PostMetaOpts {
   itemHref: string
@@ -18,7 +18,7 @@ interface PostMetaOpts {
   onDeletePost: () => void
 }
 
-export function PostMeta(opts: PostMetaOpts) {
+export default function PostMeta(opts: PostMetaOpts) {
   return (
     <View style={styles.meta}>
       <Link

src/view/com/util/PostMeta/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const PostMeta = register({
+  loader: () => import('./PostMeta'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/util/RichText/RichText.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import {Text, TextStyle, StyleProp} from 'react-native'
-import {TextLink} from './Link'
-import {s} from '../../lib/styles'
-import {toShortUrl} from '../../../lib/strings'
+import {TextLink} from '../Link'
+import {s} from '../../../lib/styles'
+import {toShortUrl} from '../../../../lib/strings'
 
 type TextSlice = {start: number; end: number}
 type Entity = {
@@ -11,7 +11,7 @@ type Entity = {
   value: string
 }
 
-export function RichText({
+export default function RichText({
   text,
   entities,
   style,

src/view/com/util/RichText/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const RichText = register({
+  loader: () => import('./RichText'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/util/Selector/Selector.tsx

@@ -6,14 +6,14 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native'
-import {colors} from '../../lib/styles'
+import {colors} from '../../../lib/styles'
 
 interface Layout {
   x: number
   width: number
 }
 
-export function Selector({
+export default function Selector({
   selectedIndex,
   items,
   panX,

src/view/com/util/Selector/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const Selector = register({
+  loader: () => import('./Selector'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/util/UserAvatar/UserAvatar.tsx

@@ -8,10 +8,10 @@ import {
   openPicker,
   Image as PickedImage,
 } from 'react-native-image-crop-picker'
-import {getGradient} from '../../lib/asset-gen'
-import {colors} from '../../lib/styles'
+import {getGradient} from '../../../lib/asset-gen'
+import {colors} from '../../../lib/styles'
 
-export function UserAvatar({
+export default function UserAvatar({
   size,
   handle,
   avatar,

src/view/com/util/UserAvatar/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const UserAvatar = register({
+  loader: () => import('./UserAvatar'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/util/UserBanner/UserBanner.tsx

@@ -2,16 +2,16 @@ import React, {useCallback} from 'react'
 import {StyleSheet, View, TouchableOpacity, Alert, Image} from 'react-native'
 import Svg, {Rect, Defs, LinearGradient, Stop} from 'react-native-svg'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {getGradient} from '../../lib/asset-gen'
-import {colors} from '../../lib/styles'
+import {getGradient} from '../../../lib/asset-gen'
+import {colors} from '../../../lib/styles'
 import {
   openCamera,
   openCropper,
   openPicker,
 } from 'react-native-image-crop-picker'
-import {IMAGES_ENABLED} from '../../../build-flags'
+import {IMAGES_ENABLED} from '../../../../build-flags'
 
-export function UserBanner({
+export default function UserBanner({
   handle,
   userBanner,
   setUserBanner,

src/view/com/util/UserBanner/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const ProfileCard = register({
+  loader: () => import('./ProfileCard'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/util/UserInfoText/UserInfoText.tsx

@@ -1,9 +1,9 @@
 import React, {useState, useEffect} from 'react'
-import * as GetProfile from '../../../third-party/api/src/client/types/app/bsky/actor/getProfile'
+import * as GetProfile from '../../../../third-party/api/src/client/types/app/bsky/actor/getProfile'
 import {StyleProp, Text, TextStyle} from 'react-native'
-import {Link} from './Link'
-import {LoadingPlaceholder} from './LoadingPlaceholder'
-import {useStores} from '../../../state'
+import {TextLink} from '../Link'
+import {LoadingPlaceholder} from '../LoadingPlaceholder'
+import {useStores} from '../../../../state'
 
 export function UserInfoText({
   did,
@@ -67,11 +67,11 @@ export function UserInfoText({
   if (asLink) {
     const title = profile?.displayName || profile?.handle || 'User'
     return (
-      <Link
+      <TextLink
         href={`/profile/${profile?.handle ? profile.handle : did}`}
         title={title}>
         {inner}
-      </Link>
+      </TextLink>
     )
   }
 

src/view/com/util/UserInfoText/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const UserInfoText = register({
+  loader: () => import('./UserInfoText'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/util/ViewHeader/ViewHeader.tsx

@@ -8,14 +8,14 @@ import {
   View,
 } from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {s, colors} from '../../lib/styles'
-import {MagnifyingGlassIcon} from '../../lib/icons'
-import {useStores} from '../../../state'
+import {s, colors} from '../../../lib/styles'
+import {MagnifyingGlassIcon} from '../../../lib/icons'
+import {useStores} from '../../../../state'
 
 const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
 const BACK_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10}
 
-export const ViewHeader = observer(function ViewHeader({
+export default observer(function ViewHeader({
   title,
   subtitle,
   onPost,

src/view/com/util/ViewHeader/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const ViewHeader = register({
+  loader: () => import('./ViewHeader'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/util/ViewSelector/ViewSelector.tsx

@@ -1,15 +1,15 @@
 import React, {useEffect, useState, useMemo} from 'react'
 import {FlatList, StyleSheet, View} from 'react-native'
-import {Selector} from './Selector'
-import {HorzSwipe} from './gestures/HorzSwipe'
-import {useAnimatedValue} from '../../lib/useAnimatedValue'
-import {useStores} from '../../../state'
+import {Selector} from '../Selector'
+import {HorzSwipe} from '../gestures/HorzSwipe'
+import {useAnimatedValue} from '../../../lib/useAnimatedValue'
+import {useStores} from '../../../../state'
 
 const HEADER_ITEM = {_reactKey: '__header__'}
 const SELECTOR_ITEM = {_reactKey: '__selector__'}
 const STICKY_HEADER_INDICES = [1]
 
-export function ViewSelector({
+export default function ViewSelector({
   sections,
   items,
   refreshing,

src/view/com/util/ViewSelector/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const ViewSelector = register({
+  loader: () => import('./ViewSelector'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/util/gestures/HorzSwipe/HorzSwipe.tsx

@@ -24,7 +24,7 @@ interface Props {
   children: React.ReactNode
 }
 
-export function HorzSwipe({
+export default function HorzSwipe({
   panX,
   canSwipeLeft = false,
   canSwipeRight = false,

src/view/com/util/gestures/HorzSwipe/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const HorzSwipe = register({
+  loader: () => import('./HorzSwipe'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/shell/mobile/TabsSelector/TabsSelector.tsx

@@ -12,15 +12,15 @@ import {
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import Swipeable from 'react-native-gesture-handler/Swipeable'
-import {useStores} from '../../../state'
-import {s, colors} from '../../lib/styles'
-import {toShareUrl} from '../../../lib/strings'
-import {match} from '../../routes'
-import {useAnimatedValue} from '../../lib/useAnimatedValue'
+import {useStores} from '../../../../state'
+import {s, colors} from '../../../lib/styles'
+import {toShareUrl} from '../../../../lib/strings'
+import {match} from '../../../routes'
+import {useAnimatedValue} from '../../../lib/useAnimatedValue'
 
 const TAB_HEIGHT = 42
 
-export const TabsSelector = observer(
+export default observer(
   ({
     active,
     tabMenuInterp,

src/view/shell/mobile/TabsSelector/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const TabsSelector = register({
+  loader: () => import('./TabsSelector'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})