adding more register usage

src/view/com/composer/Autocomplete/Autocomplete.tsx

@@ -6,15 +6,15 @@ import {
   StyleSheet,
   useWindowDimensions,
 } from 'react-native'
-import {useAnimatedValue} from '../../lib/useAnimatedValue'
+import {useAnimatedValue} from '../../../lib/useAnimatedValue'
-import {colors} from '../../lib/styles'
+import {colors} from '../../../lib/styles'
 
 interface AutocompleteItem {
   handle: string
   displayName?: string
 }
 
-export function Autocomplete({
+export default function Autocomplete({
   active,
   items,
   onSelect,

src/view/com/composer/Autocomplete/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 Autocomplete = register({
+  loader: () => import('./Autocomplete'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/composer/ComposePost/ComposePost.tsx

@@ -12,29 +12,29 @@ import {
 } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {UserAutocompleteViewModel} from '../../../state/models/user-autocomplete-view'
+import {UserAutocompleteViewModel} from '../../../../state/models/user-autocomplete-view'
-import {Autocomplete} from './Autocomplete'
+import {Autocomplete} from '../Autocomplete'
-import * as Toast from '../util/Toast'
+import * as Toast from '../../util/Toast'
 // @ts-ignore no type definition -prf
 import ProgressCircle from 'react-native-progress/Circle'
 // @ts-ignore no type definition -prf
 import ProgressPie from 'react-native-progress/Pie'
-import {TextLink} from '../util/Link'
+import {TextLink} from '../../util/Link'
-import {UserAvatar} from '../util/UserAvatar'
+import {UserAvatar} from '../../util/UserAvatar'
-import {useStores} from '../../../state'
+import {useStores} from '../../../../state'
-import * as apilib from '../../../state/lib/api'
+import * as apilib from '../../../../state/lib/api'
-import {ComposerOpts} from '../../../state/models/shell-ui'
+import {ComposerOpts} from '../../../../state/models/shell-ui'
-import {s, colors, gradients} from '../../lib/styles'
+import {s, colors, gradients} from '../../../lib/styles'
-import {detectLinkables} from '../../../lib/strings'
+import {detectLinkables} from '../../../../lib/strings'
-import {UserLocalPhotosModel} from '../../../state/models/user-local-photos'
+import {UserLocalPhotosModel} from '../../../../state/models/user-local-photos'
-import {PhotoCarouselPicker} from './PhotoCarouselPicker'
+import {PhotoCarouselPicker} from '../PhotoCarouselPicker'
-import {SelectedPhoto} from './SelectedPhoto'
+import {SelectedPhoto} from '../SelectedPhoto'
-import {IMAGES_ENABLED} from '../../../build-flags'
+import {IMAGES_ENABLED} from '../../../../build-flags'
 
 const MAX_TEXT_LENGTH = 256
 const DANGER_TEXT_LENGTH = MAX_TEXT_LENGTH
 
-export const ComposePost = observer(function ComposePost({
+export default observer(function ComposePost({
   replyTo,
   onPost,
   onClose,

src/view/com/composer/ComposePost/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 ComposePost = register({
+  loader: () => import('./ComposePost'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/composer/PhotoCarouselPicker/PhotoCarouselPicker.tsx

@@ -1,14 +1,14 @@
 import React, {useCallback} from 'react'
 import {Image, StyleSheet, TouchableOpacity, ScrollView} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {colors} from '../../lib/styles'
+import {colors} from '../../../lib/styles'
 import {
   openPicker,
   openCamera,
   openCropper,
 } from 'react-native-image-crop-picker'
 
-export const PhotoCarouselPicker = ({
+export default ({
   selectedPhotos,
   setSelectedPhotos,
   localPhotos,

src/view/com/composer/PhotoCarouselPicker/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 PhotoCarouselPicker = register({
+  loader: () => import('./PhotoCarouselPicker'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/composer/Prompt/ComposePrompt.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
-import {colors} from '../../lib/styles'
+import {colors} from '../../../lib/styles'
-import {useStores} from '../../../state'
+import {useStores} from '../../../../state'
-import {UserAvatar} from '../util/UserAvatar'
+import {UserAvatar} from '../../util/UserAvatar'
 
-export function ComposePrompt({
+export default function ComposePrompt({
   noAvi = false,
   text = "What's up?",
   btn = 'Post',

src/view/com/composer/Prompt/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 ComposePrompt = register({
+  loader: () => import('./ComposePrompt'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/composer/SelectedPhoto/SelectedPhoto.tsx

@@ -1,9 +1,9 @@
 import React, {useCallback} from 'react'
 import {Image, StyleSheet, TouchableOpacity, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {colors} from '../../lib/styles'
+import {colors} from '../../../lib/styles'
 
-export const SelectedPhoto = ({
+export default ({
   selectedPhotos,
   setSelectedPhotos,
 }: {

src/view/com/composer/SelectedPhoto/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 SelectedPhoto = register({
+  loader: () => import('./SelectedPhoto'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/discover/SuggestedFollows/SuggestedFollows.tsx

@@ -11,19 +11,19 @@ import LinearGradient from 'react-native-linear-gradient'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {observer} from 'mobx-react-lite'
 import _omit from 'lodash.omit'
-import {ErrorScreen} from '../util/ErrorScreen'
+import {ErrorScreen} from '../../util/ErrorScreen'
-import {Link} from '../util/Link'
+import {Link} from '../../util/Link'
-import {UserAvatar} from '../util/UserAvatar'
+import {UserAvatar} from '../../util/UserAvatar'
-import * as Toast from '../util/Toast'
+import * as Toast from '../../util/Toast'
-import {useStores} from '../../../state'
+import {useStores} from '../../../../state'
-import * as apilib from '../../../state/lib/api'
+import * as apilib from '../../../../state/lib/api'
 import {
   SuggestedActorsViewModel,
   SuggestedActor,
-} from '../../../state/models/suggested-actors-view'
+} from '../../../../state/models/suggested-actors-view'
-import {s, colors, gradients} from '../../lib/styles'
+import {s, colors, gradients} from '../../../lib/styles'
 
-export const SuggestedFollows = observer(
+export default observer(
   ({
     onNoSuggestions,
     asLinks,

src/view/com/discover/SuggestedFollows/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 SuggestedFollows = register({
+  loader: () => import('./SuggestedFollows'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/notifications/Feed/Feed.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
 import {observer} from 'mobx-react-lite'
 import {View, FlatList} from 'react-native'
-import {NotificationsViewModel} from '../../../state/models/notifications-view'
+import {NotificationsViewModel} from '../../../../state/models/notifications-view'
-import {FeedItem} from './FeedItem'
+import {FeedItem} from '../FeedItem'
-import {NotificationFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
+import {NotificationFeedLoadingPlaceholder} from '../../util/LoadingPlaceholder'
-import {ErrorMessage} from '../util/ErrorMessage'
+import {ErrorMessage} from '../../util/ErrorMessage'
-import {EmptyState} from '../util/EmptyState'
+import {EmptyState} from '../../util/EmptyState'
 
 const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}
 
-export const Feed = observer(function Feed({
+export default observer(function Feed({
   view,
   onPressTryAgain,
 }: {

src/view/com/notifications/Feed/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 Feed = register({
+  loader: () => import('./Feed'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/notifications/FeedItem/FeedItem.tsx

@@ -1,22 +1,22 @@
 import React, {useMemo} from 'react'
 import {observer} from 'mobx-react-lite'
 import {StyleSheet, Text, View} from 'react-native'
-import {AtUri} from '../../../third-party/uri'
+import {AtUri} from '../../../../third-party/uri'
 import {FontAwesomeIcon, Props} from '@fortawesome/react-native-fontawesome'
-import {NotificationsViewItemModel} from '../../../state/models/notifications-view'
+import {NotificationsViewItemModel} from '../../../../state/models/notifications-view'
-import {PostThreadViewModel} from '../../../state/models/post-thread-view'
+import {PostThreadViewModel} from '../../../../state/models/post-thread-view'
-import {s, colors} from '../../lib/styles'
+import {s, colors} from '../../../lib/styles'
-import {ago, pluralize} from '../../../lib/strings'
+import {ago, pluralize} from '../../../../lib/strings'
-import {UpIconSolid} from '../../lib/icons'
+import {UpIconSolid} from '../../../lib/icons'
-import {UserAvatar} from '../util/UserAvatar'
+import {UserAvatar} from '../../util/UserAvatar'
-import {ErrorMessage} from '../util/ErrorMessage'
+import {ErrorMessage} from '../../util/ErrorMessage'
-import {Post} from '../post/Post'
+import {Post} from '../../post/Post'
-import {Link} from '../util/Link'
+import {Link} from '../../util/Link'
-import {InviteAccepter} from './InviteAccepter'
+import {InviteAccepter} from '../InviteAccepter'
 
 const MAX_AUTHORS = 8
 
-export const FeedItem = observer(function FeedItem({
+export default observer(function FeedItem({
   item,
 }: {
   item: NotificationsViewItemModel

src/view/com/notifications/FeedItem/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 FeedItem = register({
+  loader: () => import('./FeedItem'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/notifications/InviteAccepter/InviteAccepter.tsx

@@ -2,15 +2,19 @@ import React, {useState} from 'react'
 import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import * as apilib from '../../../state/lib/api'
+import * as apilib from '../../../../state/lib/api'
-import {NotificationsViewItemModel} from '../../../state/models/notifications-view'
+import {NotificationsViewItemModel} from '../../../../state/models/notifications-view'
-import {ConfirmModel} from '../../../state/models/shell-ui'
+import {ConfirmModel} from '../../../../state/models/shell-ui'
-import {useStores} from '../../../state'
+import {useStores} from '../../../../state'
-import {ProfileCard} from '../profile/ProfileCard'
+import {ProfileCard} from '../../profile/ProfileCard'
-import * as Toast from '../util/Toast'
+import * as Toast from '../../util/Toast'
-import {s, colors, gradients} from '../../lib/styles'
+import {s, colors, gradients} from '../../../lib/styles'
 
-export function InviteAccepter({item}: {item: NotificationsViewItemModel}) {
+export default function InviteAccepter({
+  item,
+}: {
+  item: NotificationsViewItemModel
+}) {
   const store = useStores()
   const [confirmationUri, setConfirmationUri] = useState<string>('')
   const isMember =

src/view/com/notifications/InviteAccepter/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 InviteAccepter = register({
+  loader: () => import('./InviteAccepter'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/onboard/FeatureExplainer/FeatureExplainer.tsx

@@ -11,11 +11,11 @@ import {
 } from 'react-native'
 import {TabView, SceneMap, Route, TabBarProps} from 'react-native-tab-view'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {UserGroupIcon} from '../../lib/icons'
+import {UserGroupIcon} from '../../../lib/icons'
-import {useStores} from '../../../state'
+import {useStores} from '../../../../state'
-import {s} from '../../lib/styles'
+import {s} from '../../../lib/styles'
-import {SCENE_EXPLAINER, TABS_EXPLAINER} from '../../lib/assets'
+import {SCENE_EXPLAINER, TABS_EXPLAINER} from '../../../lib/assets'
-import {TABS_ENABLED} from '../../../build-flags'
+import {TABS_ENABLED} from '../../../../build-flags'
 
 const Intro = () => (
   <View style={styles.explainer}>
@@ -79,7 +79,7 @@ const SCENE_MAP = {
 }
 const renderScene = SceneMap(SCENE_MAP)
 
-export const FeatureExplainer = () => {
+export default () => {
   const layout = useWindowDimensions()
   const store = useStores()
   const [index, setIndex] = useState(0)

src/view/com/onboard/FeatureExplainer/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 FeatureExplainer = register({
+  loader: () => import('./FeatureExplainer'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/onboard/Follows/Follows.tsx

@@ -7,11 +7,11 @@ import {
   View,
 } from 'react-native'
 import {observer} from 'mobx-react-lite'
-import {SuggestedFollows} from '../discover/SuggestedFollows'
+import {SuggestedFollows} from '../../discover/SuggestedFollows'
-import {useStores} from '../../../state'
+import {useStores} from '../../../../state'
-import {s} from '../../lib/styles'
+import {s} from '../../../lib/styles'
 
-export const Follows = observer(() => {
+export default observer(() => {
   const store = useStores()
 
   const onNoSuggestions = () => {

src/view/com/onboard/Follows/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 Follows = register({
+  loader: () => import('./Follows'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

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

@@ -4,18 +4,14 @@ import {ActivityIndicator, FlatList, StyleSheet, Text, View} from 'react-native'
 import {
   RepostedByViewModel,
   RepostedByViewItemModel,
-} from '../../../state/models/reposted-by-view'
+} from '../../../../state/models/reposted-by-view'
-import {UserAvatar} from '../util/UserAvatar'
+import {UserAvatar} from '../../util/UserAvatar'
-import {ErrorMessage} from '../util/ErrorMessage'
+import {ErrorMessage} from '../../util/ErrorMessage'
-import {Link} from '../util/Link'
+import {Link} from '../../util/Link'
-import {useStores} from '../../../state'
+import {useStores} from '../../../../state'
-import {s, colors} from '../../lib/styles'
+import {s, colors} from '../../../lib/styles'
 
-export const PostRepostedBy = observer(function PostRepostedBy({
+export default observer(function PostRepostedBy({uri}: {uri: string}) {
-  uri,
-}: {
-  uri: string
-}) {
   const store = useStores()
   const [view, setView] = useState<RepostedByViewModel | undefined>()
 

src/view/com/post-thread/PostRepostedBy/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 PostRepostedBy = register({
+  loader: () => import('./PostRepostedBy'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

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

@@ -4,12 +4,12 @@ import {ActivityIndicator, FlatList, Text, View} from 'react-native'
 import {
   PostThreadViewModel,
   PostThreadViewPostModel,
-} from '../../../state/models/post-thread-view'
+} from '../../../../state/models/post-thread-view'
-import {useStores} from '../../../state'
+import {useStores} from '../../../../state'
-import {PostThreadItem} from './PostThreadItem'
+import {PostThreadItem} from '../PostThreadItem'
-import {ErrorMessage} from '../util/ErrorMessage'
+import {ErrorMessage} from '../../util/ErrorMessage'
 
-export const PostThread = observer(function PostThread({
+export default observer(function PostThread({
   uri,
   view,
 }: {

src/view/com/post-thread/PostThread/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 PostThread = register({
+  loader: () => import('./PostThread'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

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

@@ -2,27 +2,27 @@ import React, {useMemo, useState} from 'react'
 import {observer} from 'mobx-react-lite'
 import {StyleSheet, Text, View} from 'react-native'
 import Clipboard from '@react-native-clipboard/clipboard'
-import {AtUri} from '../../../third-party/uri'
+import {AtUri} from '../../../../third-party/uri'
-import * as PostType from '../../../third-party/api/src/client/types/app/bsky/feed/post'
+import * as PostType from '../../../../third-party/api/src/client/types/app/bsky/feed/post'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {PostThreadViewPostModel} from '../../../state/models/post-thread-view'
+import {PostThreadViewPostModel} from '../../../../state/models/post-thread-view'
-import {Link} from '../util/Link'
+import {Link} from '../../util/Link'
-import {RichText} from '../util/RichText'
+import {RichText} from '../../util/RichText'
-import {PostDropdownBtn} from '../util/DropdownBtn'
+import {PostDropdownBtn} from '../../util/DropdownBtn'
-import * as Toast from '../util/Toast'
+import * as Toast from '../../util/Toast'
-import {UserAvatar} from '../util/UserAvatar'
+import {UserAvatar} from '../../util/UserAvatar'
-import {s, colors} from '../../lib/styles'
+import {s, colors} from '../../../lib/styles'
-import {ago, pluralize} from '../../../lib/strings'
+import {ago, pluralize} from '../../../../lib/strings'
-import {useStores} from '../../../state'
+import {useStores} from '../../../../state'
-import {PostMeta} from '../util/PostMeta'
+import {PostMeta} from '../../util/PostMeta'
-import {PostEmbeds} from '../util/PostEmbeds'
+import {PostEmbeds} from '../../util/PostEmbeds'
-import {PostCtrls} from '../util/PostCtrls'
+import {PostCtrls} from '../../util/PostCtrls'
-import {ComposePrompt} from '../composer/Prompt'
+import {ComposePrompt} from '../../composer/Prompt'
 
 const PARENT_REPLY_LINE_LENGTH = 8
 const REPLYING_TO_LINE_LENGTH = 6
 
-export const PostThreadItem = observer(function PostThreadItem({
+export default observer(function PostThreadItem({
   item,
   onPostReply,
 }: {

src/view/com/post-thread/PostThreadItem/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 PostThreadItem = register({
+  loader: () => import('./PostThreadItem'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

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

@@ -4,14 +4,14 @@ import {ActivityIndicator, FlatList, StyleSheet, Text, View} from 'react-native'
 import {
   VotesViewModel,
   VotesViewItemModel,
-} from '../../../state/models/votes-view'
+} from '../../../../state/models/votes-view'
-import {Link} from '../util/Link'
+import {Link} from '../../util/Link'
-import {ErrorMessage} from '../util/ErrorMessage'
+import {ErrorMessage} from '../../util/ErrorMessage'
-import {UserAvatar} from '../util/UserAvatar'
+import {UserAvatar} from '../../util/UserAvatar'
-import {useStores} from '../../../state'
+import {useStores} from '../../../../state'
-import {s, colors} from '../../lib/styles'
+import {s, colors} from '../../../lib/styles'
 
-export const PostVotedBy = observer(function PostVotedBy({
+export default observer(function PostVotedBy({
   uri,
   direction,
 }: {

src/view/com/post-thread/PostVotedBy/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 PostVotedBy = register({
+  loader: () => import('./PostVotedBy'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/post/Post/Post.tsx

@@ -9,21 +9,21 @@ import {
 } from 'react-native'
 import {observer} from 'mobx-react-lite'
 import Clipboard from '@react-native-clipboard/clipboard'
-import {AtUri} from '../../../third-party/uri'
+import {AtUri} from '../../../../third-party/uri'
-import * as PostType from '../../../third-party/api/src/client/types/app/bsky/feed/post'
+import * as PostType from '../../../../third-party/api/src/client/types/app/bsky/feed/post'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {PostThreadViewModel} from '../../../state/models/post-thread-view'
+import {PostThreadViewModel} from '../../../../state/models/post-thread-view'
-import {Link} from '../util/Link'
+import {Link} from '../../util/Link'
-import {UserInfoText} from '../util/UserInfoText'
+import {UserInfoText} from '../../util/UserInfoText'
-import {PostMeta} from '../util/PostMeta'
+import {PostMeta} from '../../util/PostMeta'
-import {PostCtrls} from '../util/PostCtrls'
+import {PostCtrls} from '../../util/PostCtrls'
-import {RichText} from '../util/RichText'
+import {RichText} from '../../util/RichText'
-import * as Toast from '../util/Toast'
+import * as Toast from '../../util/Toast'
-import {UserAvatar} from '../util/UserAvatar'
+import {UserAvatar} from '../../util/UserAvatar'
-import {useStores} from '../../../state'
+import {useStores} from '../../../../state'
-import {s, colors} from '../../lib/styles'
+import {s, colors} from '../../../lib/styles'
 
-export const Post = observer(function Post({
+export default observer(function Post({
   uri,
   initView,
   style,

src/view/com/post/Post/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 Post = register({
+  loader: () => import('./Post'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/post/PostText/PostText.tsx

@@ -1,12 +1,12 @@
 import React, {useState, useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
 import {Text, View} from 'react-native'
-import {LoadingPlaceholder} from '../util/LoadingPlaceholder'
+import {LoadingPlaceholder} from '../../util/LoadingPlaceholder'
-import {ErrorMessage} from '../util/ErrorMessage'
+import {ErrorMessage} from '../../util/ErrorMessage'
-import {PostModel} from '../../../state/models/post'
+import {PostModel} from '../../../../state/models/post'
-import {useStores} from '../../../state'
+import {useStores} from '../../../../state'
 
-export const PostText = observer(function PostText({
+export default observer(function PostText({
   uri,
   style,
 }: {

src/view/com/post/PostText/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 PostText = register({
+  loader: () => import('./PostText'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/posts/Feed/Feed.tsx

@@ -1,17 +1,17 @@
 import React, {MutableRefObject} from 'react'
 import {observer} from 'mobx-react-lite'
 import {View, FlatList, StyleProp, ViewStyle} from 'react-native'
-import {PostFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
+import {PostFeedLoadingPlaceholder} from '../../util/LoadingPlaceholder'
-import {EmptyState} from '../util/EmptyState'
+import {EmptyState} from '../../util/EmptyState'
-import {ErrorMessage} from '../util/ErrorMessage'
+import {ErrorMessage} from '../../util/ErrorMessage'
-import {FeedModel} from '../../../state/models/feed-view'
+import {FeedModel} from '../../../../state/models/feed-view'
-import {FeedItem} from './FeedItem'
+import {FeedItem} from '../FeedItem'
-import {ComposePrompt} from '../composer/Prompt'
+import {ComposePrompt} from '../../composer/Prompt'
 
 const COMPOSE_PROMPT_ITEM = {_reactKey: '__prompt__'}
 const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}
 
-export const Feed = observer(function Feed({
+export default observer(function Feed({
   feed,
   style,
   scrollElRef,

src/view/com/posts/Feed/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 Feed = register({
+  loader: () => import('./Feed'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/posts/FeedItem/FeedItem.tsx

@@ -2,29 +2,25 @@ import React, {useMemo, useState} from 'react'
 import {observer} from 'mobx-react-lite'
 import {StyleSheet, Text, View} from 'react-native'
 import Clipboard from '@react-native-clipboard/clipboard'
-import {AtUri} from '../../../third-party/uri'
+import {AtUri} from '../../../../third-party/uri'
-import * as PostType from '../../../third-party/api/src/client/types/app/bsky/feed/post'
+import * as PostType from '../../../../third-party/api/src/client/types/app/bsky/feed/post'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {FeedItemModel} from '../../../state/models/feed-view'
+import {FeedItemModel} from '../../../../state/models/feed-view'
-import {Link} from '../util/Link'
+import {Link} from '../../util/Link'
-import {UserInfoText} from '../util/UserInfoText'
+import {UserInfoText} from '../../util/UserInfoText'
-import {PostMeta} from '../util/PostMeta'
+import {PostMeta} from '../../util/PostMeta'
-import {PostCtrls} from '../util/PostCtrls'
+import {PostCtrls} from '../../util/PostCtrls'
-import {PostEmbeds} from '../util/PostEmbeds'
+import {PostEmbeds} from '../../util/PostEmbeds'
-import {RichText} from '../util/RichText'
+import {RichText} from '../../util/RichText'
-import * as Toast from '../util/Toast'
+import * as Toast from '../../util/Toast'
-import {UserAvatar} from '../util/UserAvatar'
+import {UserAvatar} from '../../util/UserAvatar'
-import {s, colors} from '../../lib/styles'
+import {s, colors} from '../../../lib/styles'
-import {useStores} from '../../../state'
+import {useStores} from '../../../../state'
 
 const TOP_REPLY_LINE_LENGTH = 12
 const REPLYING_TO_LINE_LENGTH = 8
 
-export const FeedItem = observer(function FeedItem({
+export default observer(function FeedItem({item}: {item: FeedItemModel}) {
-  item,
-}: {
-  item: FeedItemModel
-}) {
   const store = useStores()
   const [deleted, setDeleted] = useState(false)
   const record = item.record as unknown as PostType.Record

src/view/com/posts/FeedItem/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 FeedItem = register({
+  loader: () => import('./FeedItem'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/profile/ProfileCard/ProfileCard.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
-import {Link} from '../util/Link'
+import {Link} from '../../util/Link'
-import {UserAvatar} from '../util/UserAvatar'
+import {UserAvatar} from '../../util/UserAvatar'
-import {s, colors} from '../../lib/styles'
+import {s, colors} from '../../../lib/styles'
 
-export function ProfileCard({
+export default function ProfileCard({
   did,
   handle,
   displayName,

src/view/com/profile/ProfileCard/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/profile/ProfileFollowers/ProfileFollowers.tsx

@@ -4,18 +4,14 @@ import {ActivityIndicator, FlatList, StyleSheet, Text, View} from 'react-native'
 import {
   UserFollowersViewModel,
   FollowerItem,
-} from '../../../state/models/user-followers-view'
+} from '../../../../state/models/user-followers-view'
-import {Link} from '../util/Link'
+import {Link} from '../../util/Link'
-import {ErrorMessage} from '../util/ErrorMessage'
+import {ErrorMessage} from '../../util/ErrorMessage'
-import {UserAvatar} from '../util/UserAvatar'
+import {UserAvatar} from '../../util/UserAvatar'
-import {useStores} from '../../../state'
+import {useStores} from '../../../../state'
-import {s, colors} from '../../lib/styles'
+import {s, colors} from '../../../lib/styles'
 
-export const ProfileFollowers = observer(function ProfileFollowers({
+export default observer(function ProfileFollowers({name}: {name: string}) {
-  name,
-}: {
-  name: string
-}) {
   const store = useStores()
   const [view, setView] = useState<UserFollowersViewModel | undefined>()
 

src/view/com/profile/ProfileFollowers/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 ProfileFollowers = register({
+  loader: () => import('./ProfileFollowers'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/profile/ProfileFollows/ProfileFollows.tsx

@@ -4,18 +4,14 @@ import {ActivityIndicator, FlatList, StyleSheet, Text, View} from 'react-native'
 import {
   UserFollowsViewModel,
   FollowItem,
-} from '../../../state/models/user-follows-view'
+} from '../../../../state/models/user-follows-view'
-import {useStores} from '../../../state'
+import {useStores} from '../../../../state'
-import {Link} from '../util/Link'
+import {Link} from '../../util/Link'
-import {ErrorMessage} from '../util/ErrorMessage'
+import {ErrorMessage} from '../../util/ErrorMessage'
-import {UserAvatar} from '../util/UserAvatar'
+import {UserAvatar} from '../../util/UserAvatar'
-import {s, colors} from '../../lib/styles'
+import {s, colors} from '../../../lib/styles'
 
-export const ProfileFollows = observer(function ProfileFollows({
+export default observer(function ProfileFollows({name}: {name: string}) {
-  name,
-}: {
-  name: string
-}) {
   const store = useStores()
   const [view, setView] = useState<UserFollowsViewModel | undefined>()
 

src/view/com/profile/ProfileFollows/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 ProfileFollows = register({
+  loader: () => import('./ProfileFollows'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/profile/ProfileHeader/ProfileHeader.tsx

@@ -3,26 +3,26 @@ import {observer} from 'mobx-react-lite'
 import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {AtUri} from '../../../third-party/uri'
+import {AtUri} from '../../../../third-party/uri'
-import {ProfileViewModel} from '../../../state/models/profile-view'
+import {ProfileViewModel} from '../../../../state/models/profile-view'
-import {useStores} from '../../../state'
+import {useStores} from '../../../../state'
 import {
   ConfirmModel,
   EditProfileModel,
   InviteToSceneModel,
-} from '../../../state/models/shell-ui'
+} from '../../../../state/models/shell-ui'
-import {pluralize} from '../../../lib/strings'
+import {pluralize} from '../../../../lib/strings'
-import {s, colors} from '../../lib/styles'
+import {s, colors} from '../../../lib/styles'
-import {getGradient} from '../../lib/asset-gen'
+import {getGradient} from '../../../lib/asset-gen'
-import {DropdownBtn, DropdownItem} from '../util/DropdownBtn'
+import {DropdownBtn, DropdownItem} from '../../util/DropdownBtn'
-import * as Toast from '../util/Toast'
+import * as Toast from '../../util/Toast'
-import {LoadingPlaceholder} from '../util/LoadingPlaceholder'
+import {LoadingPlaceholder} from '../../util/LoadingPlaceholder'
-import {RichText} from '../util/RichText'
+import {RichText} from '../../util/RichText'
-import {UserAvatar} from '../util/UserAvatar'
+import {UserAvatar} from '../../util/UserAvatar'
-import {UserBanner} from '../util/UserBanner'
+import {UserBanner} from '../../util/UserBanner'
-import {UserInfoText} from '../util/UserInfoText'
+import {UserInfoText} from '../../util/UserInfoText'
 
-export const ProfileHeader = observer(function ProfileHeader({
+export default observer(function ProfileHeader({
   view,
   onRefreshAll,
 }: {

src/view/com/profile/ProfileHeader/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 ProfileHeader = register({
+  loader: () => import('./ProfileHeader'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/com/profile/ProfileMembers/ProfileMembers.tsx

@@ -1,16 +1,15 @@
 import React, {useState, useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
 import {ActivityIndicator, FlatList, View} from 'react-native'
-import {MembersViewModel, MemberItem} from '../../../state/models/members-view'
+import {
-import {ProfileCard} from './ProfileCard'
+  MembersViewModel,
-import {ErrorMessage} from '../util/ErrorMessage'
+  MemberItem,
-import {useStores} from '../../../state'
+} from '../../../../state/models/members-view'
+import {ProfileCard} from '../ProfileCard'
+import {ErrorMessage} from '../../util/ErrorMessage'
+import {useStores} from '../../../../state'
 
-export const ProfileMembers = observer(function ProfileMembers({
+export default observer(function ProfileMembers({name}: {name: string}) {
-  name,
-}: {
-  name: string
-}) {
   const store = useStores()
   const [view, setView] = useState<MembersViewModel | undefined>()
 

src/view/com/profile/ProfileMembers/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 ProfileMembers = register({
+  loader: () => import('./ProfileMembers'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/shell/mobile/Composer/Composer.tsx

@@ -1,11 +1,11 @@
 import React, {useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
 import {Animated, Easing, StyleSheet, View} from 'react-native'
-import {ComposePost} from '../../com/composer/ComposePost'
+import {ComposePost} from '../../../com/composer/ComposePost'
-import {ComposerOpts} from '../../../state/models/shell-ui'
+import {ComposerOpts} from '../../../../state/models/shell-ui'
-import {useAnimatedValue} from '../../lib/useAnimatedValue'
+import {useAnimatedValue} from '../../../lib/useAnimatedValue'
 
-export const Composer = observer(
+export default observer(
   ({
     active,
     winHeight,

src/view/shell/mobile/Composer/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 Composer = register({
+  loader: () => import('./Composer'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/shell/mobile/Menu/Menu.tsx

@@ -8,19 +8,19 @@ import {
   ViewStyle,
 } from 'react-native'
 import VersionNumber from 'react-native-version-number'
-import {s, colors} from '../../lib/styles'
+import {s, colors} from '../../../lib/styles'
-import {useStores} from '../../../state'
+import {useStores} from '../../../../state'
 import {
   HomeIcon,
   UserGroupIcon,
   BellIcon,
   CogIcon,
   MagnifyingGlassIcon,
-} from '../../lib/icons'
+} from '../../../lib/icons'
-import {UserAvatar} from '../../com/util/UserAvatar'
+import {UserAvatar} from '../../../com/util/UserAvatar'
-import {CreateSceneModel} from '../../../state/models/shell-ui'
+import {CreateSceneModel} from '../../../../state/models/shell-ui'
 
-export const Menu = ({
+export default ({
   visible,
   onClose,
 }: {

src/view/shell/mobile/Menu/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 Menu = register({
+  loader: () => import('./Menu'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})