diff --git a/shared/common-adapters/index-impl.d.ts b/shared/common-adapters/index-impl.d.ts
deleted file mode 100644
index e8ed8c74672e..000000000000
--- a/shared/common-adapters/index-impl.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-declare let ignore: object
-export default ignore
diff --git a/shared/common-adapters/index-impl.js b/shared/common-adapters/index-impl.js
deleted file mode 100644
index e4e04e1152c0..000000000000
--- a/shared/common-adapters/index-impl.js
+++ /dev/null
@@ -1,357 +0,0 @@
-// this is to defer actually importing these modules until you actually use them
-// this file is ignored by ts
-module.exports = {
-  get Animation() {
-    return require('./animation').default
-  },
-  get Avatar() {
-    return require('./avatar').default
-  },
-  get AvatarLine() {
-    return require('./avatar/avatar-line').default
-  },
-  get BackButton() {
-    return require('./back-button').default
-  },
-  get Badge() {
-    return require('./badge').default
-  },
-  get Banner() {
-    return require('./banner').Banner
-  },
-  get BannerParagraph() {
-    return require('./banner').BannerParagraph
-  },
-  get BottomSheetBackdrop() {
-    return require('./bottom-sheet').BottomSheetBackdrop
-  },
-  get BottomSheetModal() {
-    return require('./bottom-sheet').BottomSheetModal
-  },
-  get BottomSheetScrollView() {
-    return require('./bottom-sheet').BottomSheetScrollView
-  },
-  get Box() {
-    return require('./box').default
-  },
-  get Box2() {
-    return require('./box').Box2
-  },
-  get Box2Animated() {
-    return require('./box').Box2Animated
-  },
-  get Box2Div() {
-    return require('./box').Box2Div
-  },
-  get Box2Measure() {
-    return require('./box').Box2Measure
-  },
-  get Box2View() {
-    return require('./box').Box2View
-  },
-  get BoxGrow() {
-    return require('./box-grow').default
-  },
-  get BoxGrow2() {
-    return require('./box-grow').BoxGrow2
-  },
-  get Button() {
-    return require('./button').default
-  },
-  get ButtonBar() {
-    return require('./button-bar').default
-  },
-  get CheckCircle() {
-    return require('./check-circle').default
-  },
-  get Checkbox() {
-    return require('./checkbox').default
-  },
-  get ChoiceList() {
-    return require('./choice-list').default
-  },
-  get ClickableBox() {
-    return require('./clickable-box').default
-  },
-  get ClickableBox2() {
-    return require('./clickable-box').ClickableBox2
-  },
-  get ConfirmModal() {
-    return require('./confirm-modal').default
-  },
-  get ConnectedNameWithIcon() {
-    // explicitly require this to make popup work if it's not been imported
-    // explicitly
-    require('./profile-card').default
-
-    return require('./name-with-icon').default
-  },
-  get ConnectedUsernames() {
-    // explicitly require this to make popup work if it's not been imported
-    // explicitly
-    require('./profile-card').default
-
-    return require('./usernames').default
-  },
-  get CopyText() {
-    return require('./copy-text').default
-  },
-  get CopyableText() {
-    return require('./copyable-text').default
-  },
-  get DelayedMounting() {
-    return require('./delayed-mounting').default
-  },
-  get Divider() {
-    return require('./divider').default
-  },
-  get DragAndDrop() {
-    return require('./drag-and-drop').default
-  },
-  get Dropdown() {
-    return require('./dropdown').default
-  },
-  get DropdownButton() {
-    return require('./dropdown').DropdownButton
-  },
-  get Emoji() {
-    return require('./emoji').default
-  },
-  get ErrorBoundary() {
-    return require('./error-boundary').default
-  },
-  get FloatingBox() {
-    return require('./floating-box').default
-  },
-  get FloatingMenu() {
-    return require('./floating-menu').default
-  },
-  get FloatingModalContext() {
-    return require('./floating-menu/context').FloatingModalContext
-  },
-  get FloatingPicker() {
-    return require('./floating-picker').default
-  },
-  get HeaderHocHeader() {
-    return require('./header-hoc').HeaderHocHeader
-  },
-  get HeaderHocWrapper() {
-    return require('./header-hoc').HeaderHocWrapper
-  },
-  get HeaderLeftBlank() {
-    return require('./header-hoc').HeaderLeftBlank
-  },
-  get HeaderLeftCancel() {
-    return require('./header-hoc').HeaderLeftCancel
-  },
-  get HotKey() {
-    return require('./hot-key').HotKey
-  },
-  get Icon() {
-    return require('./icon').default
-  },
-  get Image2() {
-    return require('./image2').default
-  },
-  get InfoNote() {
-    return require('./info-note').default
-  },
-  get InlineDropdown() {
-    return require('./dropdown').InlineDropdown
-  },
-  get Input2() {
-    return require('./input2').Input2
-  },
-  get KeyboardAvoidingView2() {
-    return require('./keyboard-avoiding-view').KeyboardAvoidingView2
-  },
-  get LabeledInput() {
-    return require('./labeled-input').default
-  },
-  get List() {
-    return require('./list').default
-  },
-  get List2() {
-    return require('./list2').default
-  },
-  get ListItem() {
-    return require('./list-item').default
-  },
-  get ListItem2() {
-    return require('./list-item2').default
-  },
-  get LoadingLine() {
-    return require('./loading-line').default
-  },
-  get Markdown() {
-    return require('./markdown').default
-  },
-  get Meta() {
-    return require('./meta').default
-  },
-  get MobilePopup() {
-    return require('./mobile-popup').default
-  },
-  get Modal() {
-    return require('./modal').default
-  },
-  get Modal2() {
-    return require('./modal2').default
-  },
-  get ModalHeader() {
-    return require('./modal').Header
-  },
-  get NameWithIcon() {
-    return require('./name-with-icon').default
-  },
-  get NativeEmoji() {
-    return require('./emoji/native-emoji').default
-  },
-  get NewInput() {
-    return require('./new-input').default
-  },
-  get Overlay() {
-    return require('./overlay').default
-  },
-  get PhoneInput() {
-    return require('./phone-input').default
-  },
-  get Placeholder() {
-    return require('./placeholder').default
-  },
-  get PlainInput() {
-    return require('./plain-input').default
-  },
-  get PlatformIcon() {
-    return require('./platform-icon').default
-  },
-  get PopupDialog() {
-    return require('./popup-dialog').default
-  },
-  get PopupHeaderText() {
-    return require('./popup-header-text').default
-  },
-  get PopupWrapper() {
-    return require('./header-or-popup').PopupWrapper
-  },
-  get ProfileCard() {
-    return require('./profile-card').default
-  },
-  get ProgressBar() {
-    return require('./progress-bar').default
-  },
-  get ProgressIndicator() {
-    return require('./progress-indicator').default
-  },
-  get ProofBrokenBanner() {
-    return require('./proof-broken-banner').default
-  },
-  get RadioButton() {
-    return require('./radio-button').default
-  },
-  get Reloadable() {
-    return require('./reload').default
-  },
-  get RichButton() {
-    return require('./rich-button').default
-  },
-  get RoundedBox() {
-    return require('./rounded-box').default
-  },
-  get SafeAreaView() {
-    return require('./safe-area-view').default
-  },
-  get SafeAreaViewTop() {
-    return require('./safe-area-view').SafeAreaViewTop
-  },
-  get SaveIndicator() {
-    return require('./save-indicator').default
-  },
-  get ScrollView() {
-    return require('./scroll-view').default
-  },
-  get SearchFilter() {
-    return require('./search-filter').default
-  },
-  get SectionDivider() {
-    return require('./section-divider').default
-  },
-  get SectionList() {
-    return require('./section-list').default
-  },
-  get SimpleToast() {
-    return require('./simple-toast').default
-  },
-  get Styles() {
-    return require('@/styles')
-  },
-  get Switch() {
-    return require('./switch').default
-  },
-  get Tabs() {
-    return require('./tabs').default
-  },
-  get TeamWithPopup() {
-    return require('./team-with-popup').default
-  },
-  get Text() {
-    return require('./text').default
-  },
-  get Text2() {
-    return require('./text2').Text2
-  },
-  get TimelineMarker() {
-    return require('./timeline-marker').default
-  },
-  get Toast() {
-    return require('./toast').default
-  },
-  get Video() {
-    return require('./video').default
-  },
-  get WaitingButton() {
-    return require('./waiting-button').default
-  },
-  get WaveButton() {
-    return require('./wave-button').default
-  },
-  get WebView() {
-    return require('./web-view').default
-  },
-  get WithTooltip() {
-    return require('./with-tooltip').default
-  },
-  get ZoomableImage() {
-    return require('./zoomable-image').default
-  },
-  get isValidIconType() {
-    return require('./icon.shared').isValidIconType
-  },
-  get largeListItem2Height() {
-    return require('./list-item2').largeHeight
-  },
-  get smallListItem2Height() {
-    return require('./list-item2').smallHeight
-  },
-  get urlsToImgSet() {
-    return require('./icon').urlsToImgSet
-  },
-  get useHotKey() {
-    return require('./hot-key').useHotKey
-  },
-  get useInterval() {
-    return require('./use-timers').useInterval
-  },
-  get useModalHeaderTitleAndCancel() {
-    return require('./modal').useModalHeaderTitleAndCancel
-  },
-  get usePopup2() {
-    return require('./use-popup').usePopup2
-  },
-  get useSafeAreaInsets() {
-    return require('./safe-area-view').useSafeAreaInsets
-  },
-  get useTimeout() {
-    return require('./use-timers').useTimeout
-  },
-}
diff --git a/shared/common-adapters/index-impl.tsx b/shared/common-adapters/index-impl.tsx
new file mode 100644
index 000000000000..d3649fbf238c
--- /dev/null
+++ b/shared/common-adapters/index-impl.tsx
@@ -0,0 +1,165 @@
+import * as React from 'react'
+
+import * as Styles from '@/styles'
+export {isValidIconType} from './icon.shared'
+export {urlsToImgSet} from './icon'
+export {largeHeight as largeListItem2Height, smallHeight as smallListItem2Height} from './list-item2'
+export {useHotKey} from './hot-key'
+export {useInterval, useTimeout} from './use-timers'
+export {useModalHeaderTitleAndCancel} from './modal'
+export {usePopup2} from './use-popup'
+export {useSafeAreaInsets} from './safe-area-view'
+
+export const Animation = React.lazy(async () => import('./animation').then(m => ({default: m.default})))
+export const Avatar = React.lazy(async () => import('./avatar').then(m => ({default: m.default})))
+export const AvatarLine = React.lazy(async () =>
+  import('./avatar/avatar-line').then(m => ({default: m.default}))
+)
+export const BackButton = React.lazy(async () => import('./back-button').then(m => ({default: m.default})))
+export const Badge = React.lazy(async () => import('./badge').then(m => ({default: m.default})))
+export const Banner = React.lazy(async () => import('./banner').then(m => ({default: m.Banner})))
+export const BannerParagraph = React.lazy(async () =>
+  import('./banner').then(m => ({default: m.BannerParagraph}))
+)
+export const BottomSheetBackdrop = React.lazy(async () =>
+  import('./bottom-sheet').then(m => ({default: m.BottomSheetBackdrop}))
+)
+export const BottomSheetModal = React.lazy(async () =>
+  import('./bottom-sheet').then(m => ({default: m.BottomSheetModal}))
+)
+export const BottomSheetScrollView = React.lazy(async () =>
+  import('./bottom-sheet').then(m => ({default: m.BottomSheetScrollView}))
+)
+export {default as Box, Box2, Box2Animated, Box2Div, Box2Measure, Box2View} from './box'
+export {default as BoxGrow, BoxGrow2} from './box-grow'
+export {default as Button} from './button'
+export const ButtonBar = React.lazy(async () => import('./button-bar').then(m => ({default: m.default})))
+export const CheckCircle = React.lazy(async () => import('./check-circle').then(m => ({default: m.default})))
+export const Checkbox = React.lazy(async () => import('./checkbox').then(m => ({default: m.default})))
+export const ChoiceList = React.lazy(async () => import('./choice-list').then(m => ({default: m.default})))
+export {default as ClickableBox, ClickableBox2} from './clickable-box'
+export const ConfirmModal = React.lazy(async () =>
+  import('./confirm-modal').then(m => ({default: m.default}))
+)
+export {default as ConnectedNameWithIcon} from './name-with-icon'
+export {default as ConnectedUsernames} from './usernames'
+export const CopyText = React.lazy(async () => import('./copy-text').then(m => ({default: m.default})))
+export const CopyableText = React.lazy(async () =>
+  import('./copyable-text').then(m => ({default: m.default}))
+)
+export const DelayedMounting = React.lazy(async () =>
+  import('./delayed-mounting').then(m => ({default: m.default}))
+)
+export const Divider = React.lazy(async () => import('./divider').then(m => ({default: m.default})))
+export const DragAndDrop = React.lazy(async () => import('./drag-and-drop').then(m => ({default: m.default})))
+export const Dropdown = React.lazy(async () => import('./dropdown').then(m => ({default: m.default})))
+export const DropdownButton = React.lazy(async () =>
+  import('./dropdown').then(m => ({default: m.DropdownButton}))
+)
+export const Emoji = React.lazy(async () => import('./emoji').then(m => ({default: m.default})))
+export const ErrorBoundary = React.lazy(async () =>
+  import('./error-boundary').then(m => ({default: m.default}))
+)
+export const FloatingBox = React.lazy(async () => import('./floating-box').then(m => ({default: m.default})))
+export const FloatingMenu = React.lazy(async () =>
+  import('./floating-menu').then(m => ({default: m.default}))
+)
+export const FloatingModalContext = React.lazy(async () =>
+  import('./floating-menu/context').then(m => ({default: m.FloatingModalContext}))
+)
+export const FloatingPicker = React.lazy(async () =>
+  import('./floating-picker').then(m => ({default: m.default}))
+)
+export {HeaderHocHeader, HeaderHocWrapper, HeaderLeftBlank, HeaderLeftCancel} from './header-hoc'
+export const HotKey = React.lazy(async () => import('./hot-key').then(m => ({default: m.HotKey})))
+export {default as Icon} from './icon'
+export const Image2 = React.lazy(async () => import('./image2').then(m => ({default: m.default})))
+export const InfoNote = React.lazy(async () => import('./info-note').then(m => ({default: m.default})))
+export const InlineDropdown = React.lazy(async () =>
+  import('./dropdown').then(m => ({default: m.InlineDropdown}))
+)
+export const Input2 = React.lazy(async () => import('./input2').then(m => ({default: m.Input2})))
+export {KeyboardAvoidingView2} from './keyboard-avoiding-view'
+export const LabeledInput = React.lazy(async () =>
+  import('./labeled-input').then(m => ({default: m.default}))
+)
+export const List = React.lazy(async () => import('./list').then(m => ({default: m.default})))
+export const List2 = React.lazy(async () => import('./list2').then(m => ({default: m.default})))
+export const ListItem = React.lazy(async () => import('./list-item').then(m => ({default: m.default})))
+export const ListItem2 = React.lazy(async () => import('./list-item2').then(m => ({default: m.default})))
+export const LoadingLine = React.lazy(async () => import('./loading-line').then(m => ({default: m.default})))
+export const Markdown = React.lazy(async () => import('./markdown').then(m => ({default: m.default})))
+export const Meta = React.lazy(async () => import('./meta').then(m => ({default: m.default})))
+export const MobilePopup = React.lazy(async () => import('./mobile-popup').then(m => ({default: m.default})))
+export const Modal = React.lazy(async () => import('./modal').then(m => ({default: m.default})))
+export const Modal2 = React.lazy(async () => import('./modal2').then(m => ({default: m.default})))
+export const ModalHeader = React.lazy(async () => import('./modal').then(m => ({default: m.Header})))
+export const NameWithIcon = React.lazy(async () =>
+  import('./name-with-icon').then(m => ({default: m.default}))
+)
+export const NativeEmoji = React.lazy(async () =>
+  import('./emoji/native-emoji').then(m => ({default: m.default}))
+)
+export const NewInput = React.lazy(async () => import('./new-input').then(m => ({default: m.default})))
+export const Overlay = React.lazy(async () => import('./overlay').then(m => ({default: m.default})))
+export const PhoneInput = React.lazy(async () => import('./phone-input').then(m => ({default: m.default})))
+export const Placeholder = React.lazy(async () => import('./placeholder').then(m => ({default: m.default})))
+export const PlainInput = React.lazy(async () => import('./plain-input').then(m => ({default: m.default})))
+export const PlatformIcon = React.lazy(async () =>
+  import('./platform-icon').then(m => ({default: m.default}))
+)
+export const PopupDialog = React.lazy(async () => import('./popup-dialog').then(m => ({default: m.default})))
+export const PopupHeaderText = React.lazy(async () =>
+  import('./popup-header-text').then(m => ({default: m.default}))
+)
+export const PopupWrapper = React.lazy(async () =>
+  import('./header-or-popup').then(m => ({default: m.PopupWrapper}))
+)
+export {default as ProfileCard} from './profile-card'
+export const ProgressBar = React.lazy(async () => import('./progress-bar').then(m => ({default: m.default})))
+export const ProgressIndicator = React.lazy(async () =>
+  import('./progress-indicator').then(m => ({default: m.default}))
+)
+export const ProofBrokenBanner = React.lazy(async () =>
+  import('./proof-broken-banner').then(m => ({default: m.default}))
+)
+export const RadioButton = React.lazy(async () => import('./radio-button').then(m => ({default: m.default})))
+export {default as Reloadable} from './reload'
+export const RichButton = React.lazy(async () => import('./rich-button').then(m => ({default: m.default})))
+export const RoundedBox = React.lazy(async () => import('./rounded-box').then(m => ({default: m.default})))
+export {default as SafeAreaView, SafeAreaViewTop} from './safe-area-view'
+export const SaveIndicator = React.lazy(async () =>
+  import('./save-indicator').then(m => ({default: m.default}))
+)
+export {default as ScrollView} from './scroll-view'
+export const SearchFilter = React.lazy(async () =>
+  import('./search-filter').then(m => ({default: m.default}))
+)
+export const SectionDivider = React.lazy(async () =>
+  import('./section-divider').then(m => ({default: m.default}))
+)
+export const SectionList = React.lazy(async () => import('./section-list').then(m => ({default: m.default})))
+export const SimpleToast = React.lazy(async () => import('./simple-toast').then(m => ({default: m.default})))
+export const Switch = React.lazy(async () => import('./switch').then(m => ({default: m.default})))
+export const Tabs = React.lazy(async () => import('./tabs').then(m => ({default: m.default})))
+export const TeamWithPopup = React.lazy(async () =>
+  import('./team-with-popup').then(m => ({default: m.default}))
+)
+export {default as Text} from './text'
+export {Text2} from './text2'
+export const TimelineMarker = React.lazy(async () =>
+  import('./timeline-marker').then(m => ({default: m.default}))
+)
+export const Toast = React.lazy(async () => import('./toast').then(m => ({default: m.default})))
+export const Video = React.lazy(async () => import('./video').then(m => ({default: m.default})))
+export const WaitingButton = React.lazy(async () =>
+  import('./waiting-button').then(m => ({default: m.default}))
+)
+export const WaveButton = React.lazy(async () => import('./wave-button').then(m => ({default: m.default})))
+export const WebView = React.lazy(async () => import('./web-view').then(m => ({default: m.default})))
+export const WithTooltip = React.lazy(async () => import('./with-tooltip').then(m => ({default: m.default})))
+export const ZoomableImage = React.lazy(async () =>
+  import('./zoomable-image').then(m => ({default: m.default}))
+)
+
+export {Styles}
diff --git a/shared/constants/chat2/convostate.tsx b/shared/constants/chat2/convostate.tsx
index 0045082a5567..f00daf5c0603 100644
--- a/shared/constants/chat2/convostate.tsx
+++ b/shared/constants/chat2/convostate.tsx
@@ -666,6 +666,7 @@ const createSlice: Z.ImmerStateCreator<ConvoState> = (set, get) => {
     targetOrdinal: T.Chat.Ordinal
     username: string
   }) => {
+    console.log('aaaaaa ')
     const {decorated, emoji, targetOrdinal, username} = p
     set(s => {
       const m = s.messageMap.get(targetOrdinal)