fix: infiniti loading

Expensify · Sep 22, 2023 · 5d9649c · 5d9649c
1 parent 67f40c4
commit 5d9649c
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 5 deletions.
diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
@@ -395,6 +395,7 @@ function AttachmentModal(props) {
                                 file={file}
                                 onToggleKeyboard={updateConfirmButtonVisibility}
                                 isWorkspaceAvatar={props.isWorkspaceAvatar}
+                                fallbackSource={props.fallbackSource}
                             />
                         )
                     )}

diff --git a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js
@@ -12,13 +12,14 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-function AttachmentViewImage({source, file, isAuthTokenRequired, loadComplete, onPress, isImage, onScaleChanged, translate}) {
+function AttachmentViewImage({source, file, isAuthTokenRequired, loadComplete, onPress, isImage, onScaleChanged, translate, onError}) {
     const children = (
         <ImageView
             onScaleChanged={onScaleChanged}
             url={source}
             fileName={file.name}
             isAuthTokenRequired={isImage && isAuthTokenRequired}
+            onError={onError}
         />
     );
     return onPress ? (

diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js
@@ -17,6 +17,7 @@ import AttachmentViewPdf from './AttachmentViewPdf';
 import addEncryptedAuthTokenToURL from '../../../libs/addEncryptedAuthTokenToURL';
 import * as StyleUtils from '../../../styles/StyleUtils';
 import {attachmentViewPropTypes, attachmentViewDefaultProps} from './propTypes';
+import useNetwork from '../../../hooks/useNetwork';
 
 const propTypes = {
     ...attachmentViewPropTypes,
@@ -62,9 +63,14 @@ function AttachmentView({
     translate,
     isFocused,
     isWorkspaceAvatar,
+    fallbackSource,
 }) {
     const [loadComplete, setLoadComplete] = useState(false);
 
+    const [imageError, setImageError] = useState(false);
+
+    useNetwork({onReconnect: () => setImageError(false)});
+
     // Handles case where source is a component (ex: SVG)
     if (_.isFunction(source)) {
         let iconFillColor = '';
@@ -113,7 +119,7 @@ function AttachmentView({
     if (isImage || (file && Str.isImage(file.name))) {
         return (
             <AttachmentViewImage
-                source={source}
+                source={imageError ? fallbackSource : source}
                 file={file}
                 isAuthTokenRequired={isAuthTokenRequired}
                 isUsedInCarousel={isUsedInCarousel}
@@ -122,6 +128,9 @@ function AttachmentView({
                 isImage={isImage}
                 onPress={onPress}
                 onScaleChanged={onScaleChanged}
+                onError={() => {
+                    setImageError(true);
+                }}
             />
         );
     }

diff --git a/src/components/Avatar.js b/src/components/Avatar.js
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
@@ -66,6 +66,10 @@ function Avatar(props) {
 
     useNetwork({onReconnect: () => setImageError(false)});
 
+    useEffect(() => {
+        setImageError(false);
+    }, [props.source]);
+
     if (!props.source) {
         return null;
     }
@@ -81,7 +85,7 @@ function Avatar(props) {
     const iconStyle = props.imageStyles && props.imageStyles.length ? [StyleUtils.getAvatarStyle(props.size), styles.bgTransparent, ...props.imageStyles] : undefined;
 
     const iconFillColor = isWorkspace ? StyleUtils.getDefaultWorkspaceAvatarColor(props.name).fill : props.fill;
-    const fallbackAvatar = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatar(props.name) : props.fallbackIcon;
+    const fallbackAvatar = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatar(props.name) : props.fallbackIcon || Expensicons.FallbackAvatar;
 
     return (
         <View

diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js
@@ -296,6 +296,7 @@ class AvatarWithImagePicker extends React.Component {
                         headerTitle={this.props.headerTitle}
                         source={this.props.previewSource}
                         originalFileName={this.props.originalFileName}
+                        fallbackSource={this.props.fallbackIcon}
                     >
                         {({show}) => (
                             <AttachmentPicker type={CONST.ATTACHMENT_PICKER_TYPE.IMAGE}>

diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js
@@ -22,13 +22,16 @@ const propTypes = {
 
     /** image file name */
     fileName: PropTypes.string.isRequired,
+
+    onError: PropTypes.func,
 };
 
 const defaultProps = {
     isAuthTokenRequired: false,
+    onError: () => {},
 };
 
-function ImageView({isAuthTokenRequired, url, fileName}) {
+function ImageView({isAuthTokenRequired, url, fileName, onError}) {
     const [isLoading, setIsLoading] = useState(true);
     const [containerHeight, setContainerHeight] = useState(0);
     const [containerWidth, setContainerWidth] = useState(0);
@@ -238,6 +241,7 @@ function ImageView({isAuthTokenRequired, url, fileName}) {
                     resizeMode={zoomScale > 1 ? Image.resizeMode.center : Image.resizeMode.contain}
                     onLoadStart={imageLoadingStart}
                     onLoad={imageLoad}
+                    onError={onError}
                 />
                 {(isLoading || zoomScale === 0) && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
             </View>
@@ -268,6 +272,7 @@ function ImageView({isAuthTokenRequired, url, fileName}) {
                     resizeMode={Image.resizeMode.contain}
                     onLoadStart={imageLoadingStart}
                     onLoad={imageLoad}
+                    onError={onError}
                 />
             </PressableWithoutFeedback>
 

diff --git a/src/libs/actions/PersonalDetails.js b/src/libs/actions/PersonalDetails.js
@@ -480,6 +480,7 @@ function deleteAvatar() {
             value: {
                 [currentUserAccountID]: {
                     avatar: defaultAvatar,
+                    fallbackIcon: null,
                 },
             },
         },
@@ -491,6 +492,7 @@ function deleteAvatar() {
             value: {
                 [currentUserAccountID]: {
                     avatar: allPersonalDetails[currentUserAccountID].avatar,
+                    fallbackIcon: allPersonalDetails[currentUserAccountID].fallbackIcon,
                 },
             },
         },

diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
@@ -162,6 +162,7 @@ function ProfilePage(props) {
                                 source={UserUtils.getFullSizeAvatar(avatar, accountID)}
                                 isAuthTokenRequired
                                 originalFileName={originalFileName}
+                                fallbackSource={fallbackIcon}
                             >
                                 {({show}) => (
                                     <PressableWithoutFocus