Merge pull request #35451 from tienifr/fix/32699

Fix: show loading indicator for uncached attachments

Author: yuwenmemon

src/components/Image/index.js

@@ -3,12 +3,15 @@ import React, {useEffect, useMemo} from 'react';
 import {Image as RNImage} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import useNetwork from '@hooks/useNetwork';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {defaultProps, imagePropTypes} from './imagePropTypes';
 import RESIZE_MODES from './resizeModes';
 
 function Image(props) {
     const {source: propsSource, isAuthTokenRequired, onLoad, session} = props;
+    const {isOffline} = useNetwork();
+
     /**
      * Check if the image source is a URL - if so the `encryptedAuthToken` is appended
      * to the source.
@@ -39,7 +42,7 @@ function Image(props) {
         RNImage.getSize(source.uri, (width, height) => {
             onLoad({nativeEvent: {width, height}});
         });
-    }, [onLoad, source]);
+    }, [onLoad, source, isOffline]);
 
     // Omit the props which the underlying RNImage won't use
     const forwardedProps = _.omit(props, ['source', 'onLoad', 'session', 'isAuthTokenRequired']);

src/components/ImageWithSizeCalculation.tsx

@@ -2,6 +2,7 @@ import delay from 'lodash/delay';
 import React, {useEffect, useMemo, useRef, useState} from 'react';
 import type {ImageSourcePropType, StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
+import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Log from '@libs/Log';
 import FullscreenLoadingIndicator from './FullscreenLoadingIndicator';
@@ -44,16 +45,27 @@ function ImageWithSizeCalculation({url, style, onMeasure, onLoadFailure, isAuthT
     const isLoadedRef = useRef<boolean | null>(null);
     const [isImageCached, setIsImageCached] = useState(true);
     const [isLoading, setIsLoading] = useState(false);
+    const {isOffline} = useNetwork();
 
     const source = useMemo(() => ({uri: url}), [url]);
 
     const onError = () => {
         Log.hmmm('Unable to fetch image to calculate size', {url});
         onLoadFailure?.();
+        if (isLoadedRef.current) {
+            isLoadedRef.current = false;
+            setIsImageCached(false);
+        }
+        if (isOffline) {
+            return;
+        }
+        setIsLoading(false);
     };
 
     const imageLoadedSuccessfully = (event: OnLoadNativeEvent) => {
         isLoadedRef.current = true;
+        setIsLoading(false);
+        setIsImageCached(true);
         onMeasure({
             width: event.nativeEvent.width,
             height: event.nativeEvent.height,
@@ -87,10 +99,6 @@ function ImageWithSizeCalculation({url, style, onMeasure, onLoadFailure, isAuthT
                     }
                     setIsLoading(true);
                 }}
-                onLoadEnd={() => {
-                    setIsLoading(false);
-                    setIsImageCached(true);
-                }}
                 onError={onError}
                 onLoad={imageLoadedSuccessfully}
             />