Merge pull request Expensify#76498 from apeyada/fix-75095

fix Room - You appear to be offline message appears briefly when view avatar in offline

Author: MonilBhavsar

src/components/ImageView/index.tsx

@@ -54,8 +54,9 @@ function ImageView({isAuthTokenRequired = false, url, fileName, onError}: ImageV
         setContainerSize(e.nativeEvent.layout);
     };
 
+    const isImageLoaded = imageSize.width > 0 && imageSize.height > 0;
     const imageLoadingStart = () => {
-        if (!isLoading) {
+        if (isImageLoaded) {
             return;
         }
 
@@ -66,6 +67,9 @@ function ImageView({isAuthTokenRequired = false, url, fileName, onError}: ImageV
 
     const imageLoad = ({nativeEvent: size}: ImageOnLoadEvent) => {
         setImageSize(size);
+    };
+
+    const imageLoadingEnd = () => {
         setIsLoading(false);
     };
 
@@ -189,6 +193,7 @@ function ImageView({isAuthTokenRequired = false, url, fileName, onError}: ImageV
         isLocalToUserDeviceFile = false;
     }
 
+    const shouldShowOfflineIndicator = isOffline && !isLoading && !isLocalToUserDeviceFile;
     if (canUseTouchScreen) {
         return (
             <Lightbox
@@ -207,7 +212,7 @@ function ImageView({isAuthTokenRequired = false, url, fileName, onError}: ImageV
         >
             <PressableWithoutFeedback
                 style={{
-                    ...StyleUtils.getZoomSizingStyle({imageSize, containerSize, isZoomed, zoomScale, isLoading}),
+                    ...StyleUtils.getZoomSizingStyle({imageSize, containerSize, isZoomed, zoomScale, isLoading: !isImageLoaded}),
                     ...StyleUtils.getZoomCursorStyle(isZoomed, isDragging),
                     ...(isZoomed && zoomScale >= 1 ? styles.pRelative : styles.pAbsolute),
                     ...styles.flex1,
@@ -224,6 +229,7 @@ function ImageView({isAuthTokenRequired = false, url, fileName, onError}: ImageV
                     resizeMode={RESIZE_MODES.contain}
                     onLoadStart={imageLoadingStart}
                     onLoad={imageLoad}
+                    onLoadEnd={imageLoadingEnd}
                     waitForSession={() => {
                         setImageSize({width: 0, height: 0});
                         setIsLoading(true);
@@ -233,8 +239,8 @@ function ImageView({isAuthTokenRequired = false, url, fileName, onError}: ImageV
                 />
             </PressableWithoutFeedback>
 
-            {isLoading && (!isOffline || isLocalToUserDeviceFile) && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
-            {isLoading && !isLocalToUserDeviceFile && <AttachmentOfflineIndicator />}
+            {!isImageLoaded && !shouldShowOfflineIndicator && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
+            {!isImageLoaded && shouldShowOfflineIndicator && <AttachmentOfflineIndicator />}
         </View>
     );
 }

src/components/Lightbox/index.tsx

@@ -144,6 +144,7 @@ function Lightbox({attachmentID, isAuthTokenRequired = false, uri, onScaleChange
         return !indexOutOfRange;
     }, [activePage, hasSiblingCarouselItems, page]);
     const [isLightboxImageLoaded, setLightboxImageLoaded] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
 
     const [isFallbackVisible, setFallbackVisible] = useState(!isLightboxVisible);
     const [isFallbackImageLoaded, setFallbackImageLoaded] = useState(false);
@@ -168,7 +169,7 @@ function Lightbox({attachmentID, isAuthTokenRequired = false, uri, onScaleChange
 
     const isFallbackStillLoading = isFallbackVisible && !isFallbackImageLoaded;
     const isLightboxStillLoading = isLightboxVisible && !isLightboxImageLoaded;
-    const isLoading = isActive && (isCanvasLoading || isFallbackStillLoading || isLightboxStillLoading);
+    const isImageLoaded = !(isActive && (isCanvasLoading || isFallbackStillLoading || isLightboxStillLoading));
 
     // Resets the lightbox when it becomes inactive
     useEffect(() => {
@@ -208,6 +209,7 @@ function Lightbox({attachmentID, isAuthTokenRequired = false, uri, onScaleChange
     );
 
     const isALocalFile = isLocalFile(uri);
+    const shouldShowOfflineIndicator = isOffline && !isLoading && !isALocalFile;
 
     return (
         <View
@@ -249,6 +251,9 @@ function Lightbox({attachmentID, isAuthTokenRequired = false, uri, onScaleChange
                                         setContentSize(cachedImageDimensions.get(uri));
                                         setLightboxImageLoaded(false);
                                     }}
+                                    onLoadEnd={() => {
+                                        setIsLoading(false);
+                                    }}
                                 />
                             </MultiGestureCanvas>
                         </View>
@@ -271,13 +276,13 @@ function Lightbox({attachmentID, isAuthTokenRequired = false, uri, onScaleChange
                     )}
 
                     {/* Show activity indicator while the lightbox is still loading the image. */}
-                    {isLoading && (!isOffline || isALocalFile) && (
+                    {!isImageLoaded && !shouldShowOfflineIndicator && (
                         <ActivityIndicator
                             size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
                             style={StyleSheet.absoluteFill}
                         />
                     )}
-                    {isLoading && !isALocalFile && <AttachmentOfflineIndicator />}
+                    {!isImageLoaded && shouldShowOfflineIndicator && <AttachmentOfflineIndicator />}
                 </>
             )}
         </View>