Merge pull request #912 from GetStream/vishal/gallery-memoization

fix: avoid unnecessary gallery image re-rendering upon message update

Author: vishalnarkhede

package/src/components/Attachment/Gallery.tsx

@@ -26,7 +26,7 @@ import {
   useOverlayContext,
 } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { makeImageCompatibleUrl } from '../../utils/utils';
+import { getUrlWithoutParams, makeImageCompatibleUrl } from '../../utils/utils';
 
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type {
@@ -393,8 +393,8 @@ const areEqual = <
     prevImages.length === nextImages.length &&
     prevImages.every(
       (image, index) =>
-        image.image_url === nextImages[index].image_url &&
-        image.thumb_url === nextImages[index].thumb_url,
+        getUrlWithoutParams(image.image_url) === getUrlWithoutParams(nextImages[index].image_url) &&
+        getUrlWithoutParams(image.thumb_url) === getUrlWithoutParams(nextImages[index].thumb_url),
     );
   if (!imagesEqual) return false;
 

package/src/utils/__tests__/utils.test.js

@@ -535,6 +535,15 @@ export const ACITriggerSettings = <
 export const makeImageCompatibleUrl = (url: string) =>
   (url.indexOf('//') === 0 ? `https:${url}` : url).trim();
 
+export const getUrlWithoutParams = (url?: string) => {
+  if (!url) return url;
+
+  const indexOfQuestion = url.indexOf('?');
+  if (indexOfQuestion === -1) return url;
+
+  return url.substring(0, url.indexOf('?'));
+};
+
 export const vw = (percentageWidth: number, rounded = false) => {
   const value = Dimensions.get('window').width * (percentageWidth / 100);
   return rounded ? Math.round(value) : value;