From 018516241e2691db789e7e7ff67f171950c2dcb6 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Tue, 5 Mar 2024 19:37:54 +0700
Subject: [PATCH 1/3] fix: image shrinks while loading in carousel

---
 src/components/Lightbox/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Lightbox/index.tsx b/src/components/Lightbox/index.tsx
index a7ed6946fb28..1a69e1f8958b 100644
--- a/src/components/Lightbox/index.tsx
+++ b/src/components/Lightbox/index.tsx
@@ -137,7 +137,7 @@ function Lightbox({isAuthTokenRequired = false, uri, onScaleChanged: onScaleChan
     const [isFallbackImageLoaded, setFallbackImageLoaded] = useState(false);
     const fallbackSize = useMemo(() => {
         if (!hasSiblingCarouselItems || !contentSize || isCanvasLoading) {
-            return DEFAULT_IMAGE_DIMENSION;
+            return undefined;
         }
 
         const {minScale} = getCanvasFitScale({canvasSize, contentSize});
@@ -217,7 +217,7 @@ function Lightbox({isAuthTokenRequired = false, uri, onScaleChanged: onScaleChan
                             >
                                 <Image
                                     source={{uri}}
-                                    style={contentSize ?? DEFAULT_IMAGE_DIMENSION}
+                                    style={[contentSize ?? DEFAULT_IMAGE_DIMENSION, !contentSize && {opacity: 0}]}
                                     isAuthTokenRequired={isAuthTokenRequired}
                                     onError={onError}
                                     onLoad={updateContentSize}
@@ -235,7 +235,7 @@ function Lightbox({isAuthTokenRequired = false, uri, onScaleChanged: onScaleChan
                             <Image
                                 source={{uri}}
                                 resizeMode="contain"
-                                style={fallbackSize}
+                                style={[fallbackSize ?? DEFAULT_IMAGE_DIMENSION, !contentSize && {opacity: 0}]}
                                 isAuthTokenRequired={isAuthTokenRequired}
                                 onLoad={updateContentSize}
                                 onLoadEnd={() => setFallbackImageLoaded(true)}

From 5513d1aebdb6f520a9b4055a2e4b156dbd1d8642 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Fri, 8 Mar 2024 15:27:03 +0700
Subject: [PATCH 2/3] remove default image dimension and use predefined styles

---
 src/components/Lightbox/index.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/Lightbox/index.tsx b/src/components/Lightbox/index.tsx
index 1a69e1f8958b..5629f5051113 100644
--- a/src/components/Lightbox/index.tsx
+++ b/src/components/Lightbox/index.tsx
@@ -9,11 +9,9 @@ import MultiGestureCanvas, {DEFAULT_ZOOM_RANGE} from '@components/MultiGestureCa
 import type {CanvasSize, ContentSize, OnScaleChangedCallback, ZoomRange} from '@components/MultiGestureCanvas/types';
 import {getCanvasFitScale} from '@components/MultiGestureCanvas/utils';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import NUMBER_OF_CONCURRENT_LIGHTBOXES from './numberOfConcurrentLightboxes';
 
-const DEFAULT_IMAGE_SIZE = 200;
-const DEFAULT_IMAGE_DIMENSION: ContentSize = {width: DEFAULT_IMAGE_SIZE, height: DEFAULT_IMAGE_SIZE};
-
 const cachedImageDimensions = new Map<string, ContentSize | undefined>();
 
 type LightboxProps = {
@@ -41,6 +39,7 @@ type LightboxProps = {
  */
 function Lightbox({isAuthTokenRequired = false, uri, onScaleChanged: onScaleChangedProp, onError, style, zoomRange = DEFAULT_ZOOM_RANGE}: LightboxProps) {
     const StyleUtils = useStyleUtils();
+    const styles = useThemeStyles();
 
     /**
      * React hooks must be used in the render function of the component at top-level and unconditionally.
@@ -217,7 +216,7 @@ function Lightbox({isAuthTokenRequired = false, uri, onScaleChanged: onScaleChan
                             >
                                 <Image
                                     source={{uri}}
-                                    style={[contentSize ?? DEFAULT_IMAGE_DIMENSION, !contentSize && {opacity: 0}]}
+                                    style={[contentSize ?? styles.opacity0]}
                                     isAuthTokenRequired={isAuthTokenRequired}
                                     onError={onError}
                                     onLoad={updateContentSize}
@@ -235,7 +234,7 @@ function Lightbox({isAuthTokenRequired = false, uri, onScaleChanged: onScaleChan
                             <Image
                                 source={{uri}}
                                 resizeMode="contain"
-                                style={[fallbackSize ?? DEFAULT_IMAGE_DIMENSION, !contentSize && {opacity: 0}]}
+                                style={[fallbackSize ?? styles.opacity0]}
                                 isAuthTokenRequired={isAuthTokenRequired}
                                 onLoad={updateContentSize}
                                 onLoadEnd={() => setFallbackImageLoaded(true)}

From b81f5192126b063b4099b5f25ead13ac53975ffa Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Fri, 8 Mar 2024 15:41:51 +0700
Subject: [PATCH 3/3] reapply default image size

---
 src/components/Lightbox/index.tsx | 4 ++--
 src/styles/index.ts               | 6 ++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Lightbox/index.tsx b/src/components/Lightbox/index.tsx
index edfb5c124a7f..56852a8e2ea1 100644
--- a/src/components/Lightbox/index.tsx
+++ b/src/components/Lightbox/index.tsx
@@ -216,7 +216,7 @@ function Lightbox({isAuthTokenRequired = false, uri, onScaleChanged: onScaleChan
                             >
                                 <Image
                                     source={{uri}}
-                                    style={[contentSize ?? styles.opacity0]}
+                                    style={[contentSize ?? styles.invisibleImage]}
                                     isAuthTokenRequired={isAuthTokenRequired}
                                     onError={onError}
                                     onLoad={updateContentSize}
@@ -234,7 +234,7 @@ function Lightbox({isAuthTokenRequired = false, uri, onScaleChanged: onScaleChan
                             <Image
                                 source={{uri}}
                                 resizeMode="contain"
-                                style={[fallbackSize ?? styles.opacity0]}
+                                style={[fallbackSize ?? styles.invisibleImage]}
                                 isAuthTokenRequired={isAuthTokenRequired}
                                 onLoad={updateContentSize}
                                 onLoadEnd={() => setFallbackImageLoaded(true)}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 405a05cfce78..ac763eb7cc12 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -3427,6 +3427,12 @@ const styles = (theme: ThemeColors) =>
             zIndex: 1000,
         },
 
+        invisibleImage: {
+            opacity: 0,
+            width: 200,
+            height: 200,
+        },
+
         reportDropOverlay: {
             backgroundColor: theme.dropUIBG,
             zIndex: 2,