Merge pull request #42088 from nexarvo/fix/41770

Fix Group Chat Avatar Offline Feedback in Chat
Expensify · May 28, 2024 · 9830f15 · 9830f15
2 parents 5c80742 + 058815a
commit 9830f15
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 28 deletions.
diff --git a/src/components/AvatarWithImagePicker.tsx b/src/components/AvatarWithImagePicker.tsx
@@ -306,7 +306,6 @@ function AvatarWithImagePicker({
         <View style={StyleSheet.flatten([styles.alignItemsCenter, style])}>
             <View style={styles.w100}>
                 <OfflineWithFeedback
-                    pendingAction={pendingAction}
                     errors={errors}
                     errorRowStyles={errorRowStyles}
                     style={type === CONST.ICON_TYPE_AVATAR && styles.alignItemsCenter}
@@ -331,7 +330,7 @@ function AvatarWithImagePicker({
                             style={[styles.pRelative, avatarStyle]}
                             ref={anchorRef}
                         >
-                            <View>
+                            <OfflineWithFeedback pendingAction={pendingAction}>
                                 {source ? (
                                     <Avatar
                                         containerStyles={avatarStyle}
@@ -345,7 +344,7 @@ function AvatarWithImagePicker({
                                 ) : (
                                     <DefaultAvatar />
                                 )}
-                            </View>
+                            </OfflineWithFeedback>
                             {!disabled && (
                                 <View style={StyleSheet.flatten([styles.smallEditIcon, styles.smallAvatarEditIcon, editIconStyle])}>
                                     <Icon

diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx
@@ -9,6 +9,7 @@ import type {ThreeDotsMenuItem} from '@components/HeaderWithBackButton/types';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MultipleAvatars from '@components/MultipleAvatars';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ParentNavigationSubtitle from '@components/ParentNavigationSubtitle';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import ReportHeaderSkeletonView from '@components/ReportHeaderSkeletonView';
@@ -265,10 +266,12 @@ function HeaderView({
                                             size={defaultSubscriptSize}
                                         />
                                     ) : (
-                                        <MultipleAvatars
-                                            icons={icons}
-                                            shouldShowTooltip={!isChatRoom || isChatThread}
-                                        />
+                                        <OfflineWithFeedback pendingAction={report.pendingFields?.avatar}>
+                                            <MultipleAvatars
+                                                icons={icons}
+                                                shouldShowTooltip={!isChatRoom || isChatThread}
+                                            />
+                                        </OfflineWithFeedback>
                                     )}
                                     <View style={[styles.flex1, styles.flexColumn]}>
                                         <DisplayNames

diff --git a/src/pages/home/report/ReportActionItemCreated.tsx b/src/pages/home/report/ReportActionItemCreated.tsx
@@ -66,21 +66,23 @@ function ReportActionItemCreated(props: ReportActionItemCreatedProps) {
                     accessibilityLabel={translate('accessibilityHints.chatWelcomeMessage')}
                     style={[styles.p5]}
                 >
-                    <PressableWithoutFeedback
-                        onPress={() => ReportUtils.navigateToDetailsPage(props.report)}
-                        style={[styles.mh5, styles.mb3, styles.alignSelfStart]}
-                        accessibilityLabel={translate('common.details')}
-                        role={CONST.ROLE.BUTTON}
-                        disabled={shouldDisableDetailPage}
-                    >
-                        <MultipleAvatars
-                            icons={icons}
-                            size={isLargeScreenWidth || (icons && icons.length < 3) ? CONST.AVATAR_SIZE.LARGE : CONST.AVATAR_SIZE.MEDIUM}
-                            shouldStackHorizontally
-                            shouldDisplayAvatarsInRows={isSmallScreenWidth}
-                            maxAvatarsInRow={isSmallScreenWidth ? CONST.AVATAR_ROW_SIZE.DEFAULT : CONST.AVATAR_ROW_SIZE.LARGE_SCREEN}
-                        />
-                    </PressableWithoutFeedback>
+                    <OfflineWithFeedback pendingAction={props.report?.pendingFields?.avatar}>
+                        <PressableWithoutFeedback
+                            onPress={() => ReportUtils.navigateToDetailsPage(props.report)}
+                            style={[styles.mh5, styles.mb3, styles.alignSelfStart]}
+                            accessibilityLabel={translate('common.details')}
+                            role={CONST.ROLE.BUTTON}
+                            disabled={shouldDisableDetailPage}
+                        >
+                            <MultipleAvatars
+                                icons={icons}
+                                size={isLargeScreenWidth || (icons && icons.length < 3) ? CONST.AVATAR_SIZE.LARGE : CONST.AVATAR_SIZE.MEDIUM}
+                                shouldStackHorizontally
+                                shouldDisplayAvatarsInRows={isSmallScreenWidth}
+                                maxAvatarsInRow={isSmallScreenWidth ? CONST.AVATAR_ROW_SIZE.DEFAULT : CONST.AVATAR_ROW_SIZE.LARGE_SCREEN}
+                            />
+                        </PressableWithoutFeedback>
+                    </OfflineWithFeedback>
                     <View style={[styles.ph5]}>
                         <ReportWelcomeText
                             report={props.report}

diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx
@@ -12,7 +12,6 @@ import CurrentUserPersonalDetailsSkeletonView from '@components/CurrentUserPerso
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
-import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {PressableWithFeedback} from '@components/Pressable';
 import ScreenWrapper from '@components/ScreenWrapper';
 import {ScrollOffsetContext} from '@components/ScrollOffsetContextProvider';
@@ -407,10 +406,7 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa
                             </PressableWithFeedback>
                         </Tooltip>
                     </View>
-                    <OfflineWithFeedback
-                        pendingAction={currentUserPersonalDetails?.pendingFields?.avatar ?? undefined}
-                        style={[styles.mb3, styles.w100]}
-                    >
+                    <View style={[styles.mb3, styles.w100]}>
                         <AvatarWithImagePicker
                             isUsingDefaultAvatar={UserUtils.isDefaultAvatar(currentUserDetails?.avatar ?? '')}
                             source={avatarURL}
@@ -430,7 +426,7 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa
                             fallbackIcon={currentUserDetails?.fallbackIcon}
                             editIconStyle={styles.smallEditIconAccount}
                         />
-                    </OfflineWithFeedback>
+                    </View>
                     <Text
                         style={[styles.textHeadline, styles.pre, styles.textAlignCenter]}
                         numberOfLines={1}