From 9de097928a8cc7e7f45256e48d25060c384c4dce Mon Sep 17 00:00:00 2001
From: Neeraj Bachani <neerajbachani2003@gmail.com>
Date: Fri, 4 Sep 2026 23:59:02 +0530
Subject: [PATCH] fix: position receipt preview absolutely and restore #97313
 transition UX

Position the preview out of flow so the full-resolution image is not
pushed below the clipped receipt box on web. Revert the #98668
isThumbnailLoading workaround and restore #97313's dim preview and
spinner tied to isLoading now that full-res onLoad fires reliably.
---
 src/components/ImageWithLoading.tsx | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/components/ImageWithLoading.tsx b/src/components/ImageWithLoading.tsx
index 6a236ab06970..f3a1a208560e 100644
--- a/src/components/ImageWithLoading.tsx
+++ b/src/components/ImageWithLoading.tsx
@@ -51,10 +51,6 @@ function ImageWithLoading({
     const isLoadedRef = useRef<boolean | null>(null);
     const [isImageCached, setIsImageCached] = useState(true);
     const [isLoading, setIsLoading] = useState(false);
-    // The full-resolution image is not guaranteed to ever emit `onLoad`/`onError` (e.g. a receipt derivative that is
-    // still being generated server-side), so `isLoading` can stay `true` indefinitely. Once the low-resolution preview
-    // is on screen we have something readable to show, so the loading state must stop being visible at that point.
-    const [isThumbnailLoading, setIsThumbnailLoading] = useState(!!previewUri);
     const {isOffline} = useNetwork();
 
     const handleError = () => {
@@ -101,12 +97,9 @@ function ImageWithLoading({
                     <Image
                         {...rest}
                         source={{uri: previewUri}}
-                        style={[styles.w100, styles.h100, style]}
+                        style={[styles.pAbsolute, styles.w100, styles.h100, styles.opacitySemiTransparent, style]}
                         resizeMode={resizeMode}
-                        onLoad={(e) => {
-                            setIsThumbnailLoading(false);
-                            onLoad?.(e);
-                        }}
+                        onLoad={onLoad}
                         loadingIconSize={loadingIconSize}
                         loadingIndicatorStyles={loadingIndicatorStyles}
                     />
@@ -132,13 +125,12 @@ function ImageWithLoading({
                     isLoadedRef.current = false;
                     setIsImageCached(false);
                     setIsLoading(true);
-                    setIsThumbnailLoading(!!previewUri);
                     waitForSession?.();
                 }}
                 loadingIconSize={loadingIconSize}
                 loadingIndicatorStyles={loadingIndicatorStyles}
             />
-            {isLoading && (!previewUri || isThumbnailLoading) && !isImageCached && !isOffline && (
+            {(previewUri ? isLoading : isLoading && !isImageCached) && !isOffline && (
                 <LoadingIndicator
                     iconSize={loadingIconSize}
                     style={[styles.opacity1, styles.bgTransparent, loadingIndicatorStyles]}