[Clipclops] Refactor message list (#3832)

* rework the list for accessibility

* Reverse reverse

* progress

* good to start testing

* memo `MessageItem`

* small hack

* use our custom `List` impl

* use `ScrollProvider` for `onScroll` event

* remove use of `runOnJS`

* actually, let's keep it

* add some comments

---------

Co-authored-by: Eric Bailey <git@esb.lol>

1 files changed, 8 insertions, 4 deletions

diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx
index a8393c742..ba90dd149 100644
--- a/src/components/dms/MessageItem.tsx
+++ b/src/components/dms/MessageItem.tsx
@@ -10,7 +10,7 @@ import {atoms as a, useTheme} from '#/alf'
 import {ActionsWrapper} from '#/components/dms/ActionsWrapper'
 import {Text} from '#/components/Typography'
 
-export function MessageItem({
+export let MessageItem = ({
   item,
   next,
   pending,
@@ -21,7 +21,7 @@ export function MessageItem({
     | ChatBskyConvoDefs.DeletedMessageView
     | null
   pending?: boolean
-}) {
+}): React.ReactNode => {
   const t = useTheme()
   const {currentAccount} = useSession()
 
@@ -97,7 +97,9 @@ export function MessageItem({
   )
 }
 
-export function MessageItemMetadata({
+MessageItem = React.memo(MessageItem)
+
+let MessageItemMetadata = ({
   message,
   isLastInGroup,
   style,
@@ -105,7 +107,7 @@ export function MessageItemMetadata({
   message: ChatBskyConvoDefs.MessageView
   isLastInGroup: boolean
   style: StyleProp<TextStyle>
-}) {
+}): React.ReactNode => {
   const t = useTheme()
   const {_} = useLingui()
 
@@ -174,6 +176,8 @@ export function MessageItemMetadata({
   )
 }
 
+MessageItemMetadata = React.memo(MessageItemMetadata)
+
 function localDateString(date: Date) {
   // can't use toISOString because it should be in local time
   const mm = date.getMonth()