From fdfd0f5ef072247178da2fd76422234897d12bf1 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Wed, 31 Jan 2024 10:54:16 +0700
Subject: [PATCH 1/2] show loading indicator for uncached attachments

---
 src/components/Image/index.js               |  5 ++++-
 src/components/ImageWithSizeCalculation.tsx | 13 +++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/Image/index.js b/src/components/Image/index.js
index ef1a69e19c12..59fcde8273fd 100644
--- a/src/components/Image/index.js
+++ b/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']);
diff --git a/src/components/ImageWithSizeCalculation.tsx b/src/components/ImageWithSizeCalculation.tsx
index d0559327274a..344904796f31 100644
--- a/src/components/ImageWithSizeCalculation.tsx
+++ b/src/components/ImageWithSizeCalculation.tsx
@@ -2,6 +2,7 @@ import delay from 'lodash/delay';
 import React, {useEffect, 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';
@@ -42,13 +43,21 @@ function ImageWithSizeCalculation({url, style, onMeasure, isAuthTokenRequired}:
     const isLoadedRef = useRef<boolean | null>(null);
     const [isImageCached, setIsImageCached] = useState(true);
     const [isLoading, setIsLoading] = useState(false);
+    const {isOffline} = useNetwork();
 
     const onError = () => {
         Log.hmmm('Unable to fetch image to calculate size', {url});
+        if (isOffline) {
+            return;
+        }
+        setIsLoading(false);
+        setIsImageCached(true);
     };
 
     const imageLoadedSuccessfully = (event: OnLoadNativeEvent) => {
         isLoadedRef.current = true;
+        setIsLoading(false);
+        setIsImageCached(true);
         onMeasure({
             width: event.nativeEvent.width,
             height: event.nativeEvent.height,
@@ -82,10 +91,6 @@ function ImageWithSizeCalculation({url, style, onMeasure, isAuthTokenRequired}:
                     }
                     setIsLoading(true);
                 }}
-                onLoadEnd={() => {
-                    setIsLoading(false);
-                    setIsImageCached(true);
-                }}
                 onError={onError}
                 onLoad={imageLoadedSuccessfully}
             />

From 07d77a47903583f9858d121f65bd8572b1aa3456 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Thu, 15 Feb 2024 00:13:53 +0700
Subject: [PATCH 2/2] fix uncache image

---
 src/components/ImageWithSizeCalculation.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/ImageWithSizeCalculation.tsx b/src/components/ImageWithSizeCalculation.tsx
index 344904796f31..eb30d857aaa4 100644
--- a/src/components/ImageWithSizeCalculation.tsx
+++ b/src/components/ImageWithSizeCalculation.tsx
@@ -47,11 +47,14 @@ function ImageWithSizeCalculation({url, style, onMeasure, isAuthTokenRequired}:
 
     const onError = () => {
         Log.hmmm('Unable to fetch image to calculate size', {url});
+        if (isLoadedRef.current) {
+            isLoadedRef.current = false;
+            setIsImageCached(false);
+        }
         if (isOffline) {
             return;
         }
         setIsLoading(false);
-        setIsImageCached(true);
     };
 
     const imageLoadedSuccessfully = (event: OnLoadNativeEvent) => {