perf: image gallery rendering improvements (#3108)

isekovanic · web-flow · commit e87cc22c66cb · 2025-05-30T12:09:09.000+02:00
diff --git a/package/src/components/Chat/Chat.tsx b/package/src/components/Chat/Chat.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useEffect, useState } from 'react';
+import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react';
 import { Image, Platform } from 'react-native';
 
 import { Channel, OfflineDBState } from 'stream-chat';
@@ -11,8 +11,7 @@ import { useMutedUsers } from './hooks/useMutedUsers';
 import { ChannelsStateProvider } from '../../contexts/channelsStateContext/ChannelsStateContext';
 import { ChatContextValue, ChatProvider } from '../../contexts/chatContext/ChatContext';
 import { useDebugContext } from '../../contexts/debugContext/DebugContext';
-import { useOverlayContext } from '../../contexts/overlayContext/OverlayContext';
-import { DeepPartial, ThemeProvider } from '../../contexts/themeContext/ThemeContext';
+import { DeepPartial, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
 import type { Theme } from '../../contexts/themeContext/utils/theme';
 import {
   DEFAULT_USER_LANGUAGE,
@@ -156,6 +155,11 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
   // Setup translators
   const translators = useStreami18n(i18nInstance);
 
+  const translationContextValue = useMemo(
+    () => ({ ...translators, userLanguage: client.user?.language || DEFAULT_USER_LANGUAGE }),
+    [client.user?.language, translators],
+  );
+
   /**
    * Setup connection event listeners
    */
@@ -262,9 +266,7 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
 
   return (
     <ChatProvider value={chatContext}>
-      <TranslationProvider
-        value={{ ...translators, userLanguage: client.user?.language || DEFAULT_USER_LANGUAGE }}
-      >
+      <TranslationProvider value={translationContextValue}>
         <ThemeProvider style={style}>
           <ChannelsStateProvider>{children}</ChannelsStateProvider>
         </ThemeProvider>
@@ -286,7 +288,7 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
  * - setActiveChannel - function to set the currently active channel
  */
 export const Chat = (props: PropsWithChildren<ChatProps>) => {
-  const { style } = useOverlayContext();
+  const { theme } = useTheme();
 
-  return <ChatWithContext {...{ style }} {...props} />;
+  return <ChatWithContext style={theme as DeepPartial<Theme>} {...props} />;
 };
diff --git a/package/src/components/ImageGallery/ImageGallery.tsx b/package/src/components/ImageGallery/ImageGallery.tsx
@@ -1,4 +1,4 @@
-import React, { RefObject, useCallback, useEffect, useRef, useState } from 'react';
+import React, { RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Image, ImageStyle, Keyboard, StyleSheet, ViewStyle } from 'react-native';
 
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
@@ -125,7 +125,6 @@ export const ImageGallery = (props: Props) => {
     numberOfImageGalleryGridColumns,
     overlayOpacity,
   } = props;
-  const [imageGalleryAttachments, setImageGalleryAttachments] = useState<Photo[]>([]);
   const { resizableCDNHosts } = useChatConfigContext();
   const {
     theme: {
@@ -188,13 +187,6 @@ export const ImageGallery = (props: Props) => {
    */
   const [currentImageHeight, setCurrentImageHeight] = useState<number>(fullWindowHeight);
 
-  /**
-   * JS and UI index values, the JS follows the UI but is needed
-   * for rendering the virtualized image list
-   */
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const index = useSharedValue(0);
-
   /**
    * Header visible value for animating in out
    */
@@ -214,57 +206,86 @@ export const ImageGallery = (props: Props) => {
    * photo attachments
    */
 
-  const photos = messages.reduce((acc: Photo[], cur) => {
-    const attachmentImages =
-      cur.attachments
-        ?.filter(
-          (attachment) =>
-            (attachment.type === FileTypes.Giphy &&
-              (attachment.giphy?.[giphyVersion]?.url ||
-                attachment.thumb_url ||
-                attachment.image_url)) ||
-            (attachment.type === FileTypes.Image &&
-              !attachment.title_link &&
-              !attachment.og_scrape_url &&
-              getUrlOfImageAttachment(attachment)) ||
-            (isVideoPlayerAvailable() && attachment.type === FileTypes.Video),
-        )
-        .reverse() || [];
-
-    const attachmentPhotos = attachmentImages.map((a) => {
-      const imageUrl = getUrlOfImageAttachment(a) as string;
-      const giphyURL = a.giphy?.[giphyVersion]?.url || a.thumb_url || a.image_url;
-      const isInitiallyPaused = !autoPlayVideo;
-
-      return {
-        channelId: cur.cid,
-        created_at: cur.created_at,
-        duration: 0,
-        id: `photoId-${cur.id}-${imageUrl}`,
-        messageId: cur.id,
-        mime_type: a.type === 'giphy' ? getGiphyMimeType(giphyURL ?? '') : a.mime_type,
-        original_height: a.original_height,
-        original_width: a.original_width,
-        paused: isInitiallyPaused,
-        progress: 0,
-        thumb_url: a.thumb_url,
-        type: a.type,
-        uri:
-          a.type === 'giphy'
-            ? giphyURL
-            : getResizedImageUrl({
-                height: fullWindowHeight,
-                resizableCDNHosts,
-                url: imageUrl,
-                width: fullWindowWidth,
-              }),
-        user: cur.user,
-        user_id: cur.user_id,
-      };
-    });
+  const photos = useMemo(
+    () =>
+      messages.reduce((acc: Photo[], cur) => {
+        const attachmentImages =
+          cur.attachments
+            ?.filter(
+              (attachment) =>
+                (attachment.type === FileTypes.Giphy &&
+                  (attachment.giphy?.[giphyVersion]?.url ||
+                    attachment.thumb_url ||
+                    attachment.image_url)) ||
+                (attachment.type === FileTypes.Image &&
+                  !attachment.title_link &&
+                  !attachment.og_scrape_url &&
+                  getUrlOfImageAttachment(attachment)) ||
+                (isVideoPlayerAvailable() && attachment.type === FileTypes.Video),
+            )
+            .reverse() || [];
+
+        const attachmentPhotos = attachmentImages.map((a) => {
+          const imageUrl = getUrlOfImageAttachment(a) as string;
+          const giphyURL = a.giphy?.[giphyVersion]?.url || a.thumb_url || a.image_url;
+          const isInitiallyPaused = !autoPlayVideo;
+
+          return {
+            channelId: cur.cid,
+            created_at: cur.created_at,
+            duration: 0,
+            id: `photoId-${cur.id}-${imageUrl}`,
+            messageId: cur.id,
+            mime_type: a.type === 'giphy' ? getGiphyMimeType(giphyURL ?? '') : a.mime_type,
+            original_height: a.original_height,
+            original_width: a.original_width,
+            paused: isInitiallyPaused,
+            progress: 0,
+            thumb_url: a.thumb_url,
+            type: a.type,
+            uri:
+              a.type === 'giphy'
+                ? giphyURL
+                : getResizedImageUrl({
+                    height: fullWindowHeight,
+                    resizableCDNHosts,
+                    url: imageUrl,
+                    width: fullWindowWidth,
+                  }),
+            user: cur.user,
+            user_id: cur.user_id,
+          };
+        });
 
-    return [...attachmentPhotos, ...acc] as Photo[];
-  }, []);
+        return [...attachmentPhotos, ...acc] as Photo[];
+      }, []),
+    [autoPlayVideo, fullWindowHeight, fullWindowWidth, giphyVersion, messages, resizableCDNHosts],
+  );
+
+  /**
+   * The URL for the images may differ because of dimensions passed as
+   * part of the query.
+   */
+  const stripQueryFromUrl = (url: string) => url.split('?')[0];
+
+  const photoSelectedIndex = useMemo(() => {
+    const idx = photos.findIndex(
+      (photo) =>
+        photo.messageId === selectedMessage?.messageId &&
+        stripQueryFromUrl(photo.uri) === stripQueryFromUrl(selectedMessage?.url || ''),
+    );
+
+    return idx === -1 ? 0 : idx;
+  }, [photos, selectedMessage]);
+
+  /**
+   * JS and UI index values, the JS follows the UI but is needed
+   * for rendering the virtualized image list
+   */
+  const [selectedIndex, setSelectedIndex] = useState(photoSelectedIndex);
+  const index = useSharedValue(photoSelectedIndex);
+
+  const [imageGalleryAttachments, setImageGalleryAttachments] = useState<Photo[]>(photos);
 
   /**
    * Photos length needs to be kept as a const here so if the length
@@ -274,17 +295,6 @@ export const ImageGallery = (props: Props) => {
    */
   const photoLength = photos.length;
 
-  useEffect(() => {
-    setImageGalleryAttachments(photos);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  /**
-   * The URL for the images may differ because of dimensions passed as
-   * part of the query.
-   */
-  const stripQueryFromUrl = (url: string) => url.split('?')[0];
-
   /**
    * Set selected photo when changed via pressing in the message list
    */
@@ -306,8 +316,7 @@ export const ImageGallery = (props: Props) => {
     );
 
     runOnUI(updatePosition)(newIndex);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedMessage, photoLength]);
+  }, [selectedMessage, photos, index, translationX, fullWindowWidth]);
 
   /**
    * Image heights are not provided and therefore need to be calculated.
@@ -318,22 +327,24 @@ export const ImageGallery = (props: Props) => {
   const uriForCurrentImage = imageGalleryAttachments[selectedIndex]?.uri;
 
   useEffect(() => {
-    setCurrentImageHeight(fullWindowHeight);
+    let currentImageHeight = fullWindowHeight;
     const photo = imageGalleryAttachments[index.value];
     const height = photo?.original_height;
     const width = photo?.original_width;
 
     if (height && width) {
       const imageHeight = Math.floor(height * (fullWindowWidth / width));
-      setCurrentImageHeight(imageHeight > fullWindowHeight ? fullWindowHeight : imageHeight);
+      currentImageHeight = imageHeight > fullWindowHeight ? fullWindowHeight : imageHeight;
     } else if (photo?.uri) {
       if (photo.type === FileTypes.Image) {
         Image.getSize(photo.uri, (width, height) => {
           const imageHeight = Math.floor(height * (fullWindowWidth / width));
-          setCurrentImageHeight(imageHeight > fullWindowHeight ? fullWindowHeight : imageHeight);
+          currentImageHeight = imageHeight > fullWindowHeight ? fullWindowHeight : imageHeight;
         });
       }
     }
+
+    setCurrentImageHeight(currentImageHeight);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [uriForCurrentImage]);
 
diff --git a/package/src/components/MessageList/MessageList.tsx b/package/src/components/MessageList/MessageList.tsx
@@ -38,10 +38,6 @@ import {
   MessagesContextValue,
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
-import {
-  OverlayContextValue,
-  useOverlayContext,
-} from '../../contexts/overlayContext/OverlayContext';
 import {
   PaginatedMessageListContextValue,
   usePaginatedMessageListContext,
@@ -149,7 +145,6 @@ type MessageListPropsWithContext = Pick<
   Pick<ChatContextValue, 'client'> &
   Pick<ImageGalleryContextValue, 'setMessages'> &
   Pick<PaginatedMessageListContextValue, 'loadMore' | 'loadMoreRecent'> &
-  Pick<OverlayContextValue, 'overlay'> &
   Pick<
     MessagesContextValue,
     | 'DateHeader'
@@ -278,7 +273,6 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     noGroupByUser,
     onListScroll,
     onThreadSelect,
-    overlay,
     reloadChannel,
     ScrollToBottomButton,
     selectedPicker,
@@ -1253,7 +1247,6 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           onViewableItemsChanged={stableOnViewableItemsChanged}
           ref={refCallback}
           renderItem={renderItem}
-          scrollEnabled={overlay === 'none'}
           showsVerticalScrollIndicator={!shouldApplyAndroidWorkaround}
           style={flatListStyle}
           testID='message-flat-list'
@@ -1330,7 +1323,6 @@ export const MessageList = (props: MessageListProps) => {
     UnreadMessagesNotification,
   } = useMessagesContext();
   const { loadMore, loadMoreRecent } = usePaginatedMessageListContext();
-  const { overlay } = useOverlayContext();
   const { loadMoreRecentThread, loadMoreThread, thread, threadInstance } = useThreadContext();
 
   return (
@@ -1365,7 +1357,6 @@ export const MessageList = (props: MessageListProps) => {
         MessageSystem,
         myMessageTheme,
         NetworkDownIndicator,
-        overlay,
         reloadChannel,
         ScrollToBottomButton,
         scrollToFirstUnreadThreshold,
diff --git a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
@@ -158,7 +158,6 @@ exports[`Thread should match thread snapshot 1`] = `
         onViewableItemsChanged={[Function]}
         removeClippedSubviews={false}
         renderItem={[Function]}
-        scrollEnabled={false}
         scrollEventThrottle={0.0001}
         showsVerticalScrollIndicator={true}
         stickyHeaderIndices={[]}
diff --git a/package/src/contexts/overlayContext/OverlayProvider.tsx b/package/src/contexts/overlayContext/OverlayProvider.tsx
@@ -204,8 +204,8 @@ export const OverlayProvider = (props: PropsWithChildren<OverlayProviderProps>)
       <OverlayContext.Provider value={overlayContext}>
         <AttachmentPickerProvider value={attachmentPickerContext}>
           <ImageGalleryProvider>
-            {children}
             <ThemeProvider style={overlayContext.style}>
+              {children}
               {overlay === 'gallery' && (
                 <ImageGallery
                   autoPlayVideo={autoPlayVideo}
