TP-31303|Image caching done|Aman Singh

App.tsx

@@ -101,10 +101,10 @@ const App = () => {
   });
 
   React.useEffect(() => {
-    hydrateGlobalImageMap();
     askForPermissions();
     const appStateChange = AppState.addEventListener('change', async (change) => {
       handleAppStateChange(change);
+      hydrateGlobalImageMap();
     });
     (async () => {
       const data = await AsyncStorage.getItem(LocalStorageKeys.GLOBAL_DOCUMENT_MAP);

src/common/CachedImage.tsx

@@ -73,7 +73,9 @@ const CachedImage: React.FC<CachedImageProps> = (props) => {
 
         if (exists) {
           setImageFilePath(cacheFilePath);
+          // if(!preCache){
           GlobalImageMap[cacheFilePath] = `file://${cacheFilePath}`;
+          // }
           setIsLoading(false);
           if (typeof onLoadEnd === 'function') onLoadEnd();
           return;
@@ -86,7 +88,9 @@ const CachedImage: React.FC<CachedImageProps> = (props) => {
         } else if (highQualityResponse.respInfo.status === 200) {
           const highQualityImageBase64 = await highQualityResponse.base64();
           RNFS.writeFile(cacheFilePath, highQualityImageBase64, 'base64');
+          // if(!preCache){
           GlobalImageMap[cacheFilePath] = `file://${cacheFilePath}`;
+          // }
           setImageFilePath(cacheFilePath);
           setIsLoading(false);
           if (typeof onLoadEnd === 'function') onLoadEnd();

src/screens/allCases/CaseItemAvatar.tsx

@@ -112,9 +112,12 @@ const CaseItemAvatar: React.FC<ICaseItemAvatar> = ({
   };
 
   const onSuccessHighRes = () => {
-    setTimeout(() => {
-      setShouldShowHighRes(true);
-    }, 1000);
+    setShouldShowHighRes(true);
+  };
+
+  const onErrorFallback = () => {
+    setShouldShowHighRes(false);
+    delete GlobalImageMap[cacheFilePath];
   };
 
   useEffect(() => {
@@ -141,7 +144,7 @@ const CaseItemAvatar: React.FC<ICaseItemAvatar> = ({
             size={size}
             name={customerName}
             dataURI={GlobalImageMap[cacheFilePath]}
-            onErrorFallback={onError}
+            onErrorFallback={onErrorFallback}
             onSuccess={onSuccessHighRes}
             containerStyle={{ position: 'absolute', zIndex: shouldShowHighRes ? 10 : 0 }}
             loading={false}

src/screens/caseDetails/CustomerProfile.tsx

@@ -170,6 +170,12 @@ const CustomerProfile: React.FC<ICustomerProfile> = (props) => {
       <ScrollView>
         <View style={GenericStyles.centerAlignedRow}>
           <View style={styles.imageContainer}>
+            {!isHighQualityImageLoaded && (
+              <ActivityIndicator
+                color={COLORS.BASE.BLUE}
+                style={styles.positionAbsoluteCenterAlign}
+              />
+            )}
             {!isHighQualityImageLoaded && (
               <FastImage
                 source={{ uri: caseDetail.imageUri }}
@@ -300,4 +306,10 @@ const styles = StyleSheet.create({
   openVideoTxt: {
     color: COLORS.TEXT.BLUE,
   },
+  positionAbsoluteCenterAlign: {
+    position: 'absolute',
+    top: '50%',
+    right: '50%',
+    zIndex: 99,
+  },
 });