perf: improve message performance

Author: isekovanic

package/src/components/Message/MessageItemView/MessageContent.tsx

@@ -167,7 +167,6 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
           messageGroupedSingleOrBottomContainer,
           messageGroupedTopContainer,
           replyContainer,
-          wrapper,
         },
       },
     },
@@ -368,43 +367,41 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
         }
       }}
     >
-      <View style={wrapper}>
-        <View
-          style={[
-            styles.containerInner,
-            {
-              backgroundColor,
-              ...getBorderRadius(),
-              ...getBorderRadiusFromTheme(),
-            },
-            noBorder ? { borderWidth: 0 } : {},
-            containerInner,
-            messageGroupedSingleOrBottom
-              ? isVeryLastMessage && enableMessageGroupingByUser
-                ? lastMessageContainer
-                : messageGroupedSingleOrBottomContainer
-              : messageGroupedTopContainer,
-          ]}
-          testID='message-content-wrapper'
-        >
-          {MessageContentTopView ? <MessageContentTopView /> : null}
-          {hasContentSideViews ? (
-            <View
-              style={[
-                styles.contentRow,
-                alignment === 'right' ? styles.rightAlignContentRow : undefined,
-              ]}
-              testID='message-content-row'
-            >
-              {MessageContentLeadingView ? <MessageContentLeadingView /> : null}
-              <View style={styles.contentBody}>{contentBody}</View>
-              {MessageContentTrailingView ? <MessageContentTrailingView /> : null}
-            </View>
-          ) : (
-            contentBody
-          )}
-          {MessageContentBottomView ? <MessageContentBottomView /> : null}
-        </View>
+      <View
+        style={[
+          styles.containerInner,
+          {
+            backgroundColor,
+            ...getBorderRadius(),
+            ...getBorderRadiusFromTheme(),
+          },
+          noBorder ? { borderWidth: 0 } : {},
+          containerInner,
+          messageGroupedSingleOrBottom
+            ? isVeryLastMessage && enableMessageGroupingByUser
+              ? lastMessageContainer
+              : messageGroupedSingleOrBottomContainer
+            : messageGroupedTopContainer,
+        ]}
+        testID='message-content-wrapper'
+      >
+        {MessageContentTopView ? <MessageContentTopView /> : null}
+        {hasContentSideViews ? (
+          <View
+            style={[
+              styles.contentRow,
+              alignment === 'right' ? styles.rightAlignContentRow : undefined,
+            ]}
+            testID='message-content-row'
+          >
+            {MessageContentLeadingView ? <MessageContentLeadingView /> : null}
+            <View style={styles.contentBody}>{contentBody}</View>
+            {MessageContentTrailingView ? <MessageContentTrailingView /> : null}
+          </View>
+        ) : (
+          contentBody
+        )}
+        {MessageContentBottomView ? <MessageContentBottomView /> : null}
       </View>
     </Pressable>
   );

package/src/contexts/themeContext/utils/theme.ts

@@ -641,7 +641,6 @@ export type Theme = {
       textContainer: ViewStyle & {
         onlyEmojiMarkdown: MarkdownStyle;
       };
-      wrapper: ViewStyle;
       timestampText?: TextStyle;
     };
     deleted: {
@@ -1568,7 +1567,6 @@ export const defaultTheme: Theme = {
         onlyEmojiMarkdown: { text: { fontSize: 50 } },
       },
       timestampText: {},
-      wrapper: {},
     },
     deleted: {
       containerInner: {},

package/src/state-store/message-overlay-store.ts

@@ -94,7 +94,13 @@ export const closeOverlay = () => {
     return;
   }
 
-  overlayStore.partialNext({ closing: true });
+  requestAnimationFrame(() => {
+    if (!overlayStore.getLatestValue().id) {
+      return;
+    }
+
+    overlayStore.partialNext({ closing: true });
+  });
 };
 
 let actionQueue: Array<() => void | Promise<void>> = [];