Merge pull request #37739 from tienifr/fix/35615

Fix: Image shrinks while loading in carousel
Expensify · Mar 18, 2024 · e4aff64 · e4aff64
2 parents 34a629d + b81f519
commit e4aff64
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git 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.
@@ -137,7 +136,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 +216,7 @@ function Lightbox({isAuthTokenRequired = false, uri, onScaleChanged: onScaleChan
                             >
                                 <Image
                                     source={{uri}}
-                                    style={contentSize ?? DEFAULT_IMAGE_DIMENSION}
+                                    style={[contentSize ?? styles.invisibleImage]}
                                     isAuthTokenRequired={isAuthTokenRequired}
                                     onError={onError}
                                     onLoad={updateContentSize}
@@ -235,7 +234,7 @@ function Lightbox({isAuthTokenRequired = false, uri, onScaleChanged: onScaleChan
                             <Image
                                 source={{uri}}
                                 resizeMode="contain"
-                                style={fallbackSize}
+                                style={[fallbackSize ?? styles.invisibleImage]}
                                 isAuthTokenRequired={isAuthTokenRequired}
                                 onLoad={updateContentSize}
                                 onLoadEnd={() => setFallbackImageLoaded(true)}

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -3449,6 +3449,12 @@ const styles = (theme: ThemeColors) =>
             zIndex: 1000,
         },
 
+        invisibleImage: {
+            opacity: 0,
+            width: 200,
+            height: 200,
+        },
+
         reportDropOverlay: {
             backgroundColor: theme.dropUIBG,
             zIndex: 2,