From 90788698b3bce5f2a40f1b442ebdad2d869f5228 Mon Sep 17 00:00:00 2001
From: Alex Beaman <alexbeaman@expensify.com>
Date: Wed, 30 Nov 2022 12:01:40 +0200
Subject: [PATCH 1/5] Add pending avatar check to initial settings

---
 src/pages/settings/InitialSettingsPage.js | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index c2bf6b384b87..7da1fa5d15cc 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -1,3 +1,4 @@
+import lodashGet from 'lodash/get';
 import React from 'react';
 import {View, ScrollView, Pressable} from 'react-native';
 import PropTypes from 'prop-types';
@@ -30,6 +31,7 @@ import * as Wallet from '../../libs/actions/Wallet';
 import walletTermsPropTypes from '../EnablePayments/walletTermsPropTypes';
 import * as PolicyUtils from '../../libs/PolicyUtils';
 import ConfirmModal from '../../components/ConfirmModal';
+import OfflineWithFeedback from '../../components/OfflineWithFeedback';
 
 const propTypes = {
     /* Onyx Props */
@@ -244,11 +246,15 @@ class InitialSettingsPage extends React.Component {
                         <View style={styles.pageWrapper}>
                             <Pressable style={[styles.mb3]} onPress={this.openProfileSettings}>
                                 <Tooltip text={this.props.currentUserPersonalDetails.displayName}>
-                                    <Avatar
-                                        imageStyles={[styles.avatarLarge]}
-                                        source={this.props.currentUserPersonalDetails.avatar}
-                                        size={CONST.AVATAR_SIZE.LARGE}
-                                    />
+                                    <OfflineWithFeedback
+                                        pendingAction={lodashGet(this.props.currentUserPersonalDetails, 'pendingFields.avatar', null)}
+                                    >
+                                        <Avatar
+                                            imageStyles={[styles.avatarLarge]}
+                                            source={this.props.currentUserPersonalDetails.avatar}
+                                            size={CONST.AVATAR_SIZE.LARGE}
+                                        />
+                                    </OfflineWithFeedback>
                                 </Tooltip>
                             </Pressable>
 

From 30bb53a6817cb314cd68e8b290ecc0188f19a5da Mon Sep 17 00:00:00 2001
From: Alex Beaman <alexbeaman@expensify.com>
Date: Wed, 30 Nov 2022 12:01:57 +0200
Subject: [PATCH 2/5] Add pending avatar check to report page

---
 src/pages/home/report/ReportActionItemSingle.js | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
index 9e2886761429..08b74247485c 100644
--- a/src/pages/home/report/ReportActionItemSingle.js
+++ b/src/pages/home/report/ReportActionItemSingle.js
@@ -1,3 +1,4 @@
+import lodashGet from 'lodash/get';
 import React from 'react';
 import {View, Pressable} from 'react-native';
 import PropTypes from 'prop-types';
@@ -17,6 +18,7 @@ import ROUTES from '../../../ROUTES';
 import {withPersonalDetails} from '../../../components/OnyxProvider';
 import Tooltip from '../../../components/Tooltip';
 import ControlSelection from '../../../libs/ControlSelection';
+import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
 
 const propTypes = {
     /** All the data of the action */
@@ -49,7 +51,7 @@ const showUserDetails = (email) => {
 };
 
 const ReportActionItemSingle = (props) => {
-    const {avatar, displayName, login} = props.personalDetails[props.action.actorEmail] || {};
+    const {avatar, displayName, login, pendingFields} = props.personalDetails[props.action.actorEmail] || {};
     const avatarUrl = props.action.automatic
         ? `${CONST.CLOUDFRONT_URL}/images/icons/concierge_2019.svg`
 
@@ -72,10 +74,14 @@ const ReportActionItemSingle = (props) => {
                 onPress={() => showUserDetails(props.action.actorEmail)}
             >
                 <Tooltip text={props.action.actorEmail}>
-                    <Avatar
-                        containerStyles={[styles.actionAvatar]}
-                        source={avatarUrl}
-                    />
+                    <OfflineWithFeedback
+                        pendingAction={lodashGet(pendingFields, 'avatar', null)}
+                    >
+                        <Avatar
+                            containerStyles={[styles.actionAvatar]}
+                            source={avatarUrl}
+                        />
+                    </OfflineWithFeedback>
                 </Tooltip>
             </Pressable>
             <View style={[styles.chatItemRight]}>

From 14d73f092facb0ee77f809abcdcd5836c374470c Mon Sep 17 00:00:00 2001
From: Alex Beaman <alexbeaman@expensify.com>
Date: Wed, 30 Nov 2022 12:02:02 +0200
Subject: [PATCH 3/5] Add pending avatar check to details page

---
 src/pages/DetailsPage.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js
index ce2ea1f4c28e..f00530af40bc 100755
--- a/src/pages/DetailsPage.js
+++ b/src/pages/DetailsPage.js
@@ -24,6 +24,7 @@ import MenuItem from '../components/MenuItem';
 import AttachmentModal from '../components/AttachmentModal';
 import PressableWithoutFocus from '../components/PressableWithoutFocus';
 import * as Report from '../libs/actions/Report';
+import OfflineWithFeedback from '../components/OfflineWithFeedback';
 
 const matchType = PropTypes.shape({
     params: PropTypes.shape({
@@ -134,12 +135,16 @@ class DetailsPage extends React.PureComponent {
                                             style={styles.noOutline}
                                             onPress={show}
                                         >
-                                            <Avatar
-                                                containerStyles={[styles.avatarLarge, styles.mb3]}
-                                                imageStyles={[styles.avatarLarge]}
-                                                source={details.avatar}
-                                                size={CONST.AVATAR_SIZE.LARGE}
-                                            />
+                                            <OfflineWithFeedback
+                                                pendingAction={lodashGet(details, 'pendingFields.avatar', null)}
+                                            >
+                                                <Avatar
+                                                    containerStyles={[styles.avatarLarge, styles.mb3]}
+                                                    imageStyles={[styles.avatarLarge]}
+                                                    source={details.avatar}
+                                                    size={CONST.AVATAR_SIZE.LARGE}
+                                                />
+                                            </OfflineWithFeedback>
                                         </PressableWithoutFocus>
                                     )}
                                 </AttachmentModal>

From 0b973a50813bda5967c455b26335472595dccaf0 Mon Sep 17 00:00:00 2001
From: Alex Beaman <alexbeaman@expensify.com>
Date: Wed, 30 Nov 2022 12:02:06 +0200
Subject: [PATCH 4/5] Add pending avatar check to LHN

---
 src/pages/home/sidebar/SidebarLinks.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 12a09d5e189a..97059d2e9c17 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -1,3 +1,4 @@
+import lodashGet from 'lodash/get';
 import React from 'react';
 import {View, TouchableOpacity} from 'react-native';
 import _ from 'underscore';
@@ -27,6 +28,7 @@ import reportActionPropTypes from '../report/reportActionPropTypes';
 import LHNOptionsList from '../../../components/LHNOptionsList/LHNOptionsList';
 import SidebarUtils from '../../../libs/SidebarUtils';
 import reportPropTypes from '../../reportPropTypes';
+import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
 
 const propTypes = {
     /** Toggles the navigation menu open and closed */
@@ -163,10 +165,14 @@ class SidebarLinks extends React.Component {
                         accessibilityRole="button"
                         onPress={this.showSettingsPage}
                     >
-                        <AvatarWithIndicator
-                            source={this.props.currentUserPersonalDetails.avatar}
-                            tooltipText={this.props.translate('common.settings')}
-                        />
+                        <OfflineWithFeedback
+                            pendingAction={lodashGet(this.props.currentUserPersonalDetails, 'pendingFields.avatar', null)}
+                        >
+                            <AvatarWithIndicator
+                                source={this.props.currentUserPersonalDetails.avatar}
+                                tooltipText={this.props.translate('common.settings')}
+                            />
+                        </OfflineWithFeedback>
                     </TouchableOpacity>
                 </View>
                 <Freeze freeze={this.props.isSmallScreenWidth && !this.props.isDrawerOpen && this.isSidebarLoaded}>

From 49d52753c2649d6b69267a6e4757740e73531efe Mon Sep 17 00:00:00 2001
From: Alex Beaman <alexbeaman@expensify.com>
Date: Thu, 5 Jan 2023 15:28:32 +0200
Subject: [PATCH 5/5] Expand destructure for lint

---
 src/pages/home/report/ReportActionItemSingle.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
index 4d4c6b60781c..73fc5781a079 100644
--- a/src/pages/home/report/ReportActionItemSingle.js
+++ b/src/pages/home/report/ReportActionItemSingle.js
@@ -51,7 +51,12 @@ const showUserDetails = (email) => {
 };
 
 const ReportActionItemSingle = (props) => {
-    const {avatar, displayName, login, pendingFields} = props.personalDetails[props.action.actorEmail] || {};
+    const {
+        avatar,
+        displayName,
+        login,
+        pendingFields,
+    } = props.personalDetails[props.action.actorEmail] || {};
     const avatarUrl = props.action.automatic
         ? CONST.CONCIERGE_ICON_URL
 
