From 82870f6251638c469177a3f519e085d661342b96 Mon Sep 17 00:00:00 2001
From: b1tjoy <103875612+b1tjoy@users.noreply.github.com>
Date: Tue, 19 Jul 2022 23:16:12 +0800
Subject: [PATCH 1/3] fix: prevent avatar icon from flicker on Web

---
 src/components/Avatar.js                        | 8 +++++++-
 src/libs/getAvatarDefaultSource/index.js        | 6 ++++++
 src/libs/getAvatarDefaultSource/index.native.js | 4 ++++
 3 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 src/libs/getAvatarDefaultSource/index.js
 create mode 100644 src/libs/getAvatarDefaultSource/index.native.js

diff --git a/src/components/Avatar.js b/src/components/Avatar.js
index ff51d2c427b8..eb5f28f64efe 100644
--- a/src/components/Avatar.js
+++ b/src/components/Avatar.js
@@ -8,6 +8,7 @@ import themeColors from '../styles/themes/default';
 import CONST from '../CONST';
 import * as StyleUtils from '../styles/StyleUtils';
 import * as Expensicons from './Icon/Expensicons';
+import getAvatarDefaultSource from '../libs/getAvatarDefaultSource';
 
 const propTypes = {
     /** Source for the avatar. Can be a URL or an icon. */
@@ -70,7 +71,12 @@ class Avatar extends PureComponent {
                         />
                     )
                     : (
-                        <Image source={{uri: this.props.source}} style={imageStyle} onError={() => this.setState({imageError: true})} />
+                        <Image
+                            source={{uri: this.props.source}}
+                            defaultSource={getAvatarDefaultSource(this.props.source)}
+                            style={imageStyle}
+                            onError={() => this.setState({imageError: true})}
+                        />
                     )}
             </View>
         );
diff --git a/src/libs/getAvatarDefaultSource/index.js b/src/libs/getAvatarDefaultSource/index.js
new file mode 100644
index 000000000000..81fc8d64fb04
--- /dev/null
+++ b/src/libs/getAvatarDefaultSource/index.js
@@ -0,0 +1,6 @@
+/**
+ * Return the source as default source of image when running on Web/Desktop
+ * @param {String|Function} source The source of avatar image
+ * @return {Object} The image source
+ */
+export default source => ({uri: source});
diff --git a/src/libs/getAvatarDefaultSource/index.native.js b/src/libs/getAvatarDefaultSource/index.native.js
new file mode 100644
index 000000000000..67be9c937881
--- /dev/null
+++ b/src/libs/getAvatarDefaultSource/index.native.js
@@ -0,0 +1,4 @@
+/**
+ * Return undefined as default source of image when running on Native
+ */
+export default () => {};

From f8de7cce0bd0cf4f2b7422bf6e05125ce6671a3f Mon Sep 17 00:00:00 2001
From: b1tjoy <103875612+b1tjoy@users.noreply.github.com>
Date: Mon, 25 Jul 2022 22:48:30 +0800
Subject: [PATCH 2/3] explain why instead of what in comment

---
 src/libs/getAvatarDefaultSource/index.js        | 3 ++-
 src/libs/getAvatarDefaultSource/index.native.js | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/libs/getAvatarDefaultSource/index.js b/src/libs/getAvatarDefaultSource/index.js
index 81fc8d64fb04..54c2a7d04b01 100644
--- a/src/libs/getAvatarDefaultSource/index.js
+++ b/src/libs/getAvatarDefaultSource/index.js
@@ -1,5 +1,6 @@
 /**
- * Return the source as default source of image when running on Web/Desktop
+ * Avatar icon flickers when message is sent for the first time, return and set the source as
+ * defaultSource prop of image to prevent avatar icon from flicker when running on Web/Desktop
  * @param {String|Function} source The source of avatar image
  * @return {Object} The image source
  */
diff --git a/src/libs/getAvatarDefaultSource/index.native.js b/src/libs/getAvatarDefaultSource/index.native.js
index 67be9c937881..3e494067bf9a 100644
--- a/src/libs/getAvatarDefaultSource/index.native.js
+++ b/src/libs/getAvatarDefaultSource/index.native.js
@@ -1,4 +1,4 @@
 /**
- * Return undefined as default source of image when running on Native
+ * Avatar icon does not flicker when running on Native, return and set undefined as defaultSource prop of image
  */
-export default () => {};
+export default () => undefined;

From a16482ab0634ecf869185772da14dfba077d9ba9 Mon Sep 17 00:00:00 2001
From: b1tjoy <103875612+b1tjoy@users.noreply.github.com>
Date: Mon, 25 Jul 2022 22:54:42 +0800
Subject: [PATCH 3/3] fix lint error

---
 src/libs/getAvatarDefaultSource/index.native.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/libs/getAvatarDefaultSource/index.native.js b/src/libs/getAvatarDefaultSource/index.native.js
index 3e494067bf9a..1c1c79caf151 100644
--- a/src/libs/getAvatarDefaultSource/index.native.js
+++ b/src/libs/getAvatarDefaultSource/index.native.js
@@ -1,4 +1,5 @@
 /**
  * Avatar icon does not flicker when running on Native, return and set undefined as defaultSource prop of image
+ * @return {Object} undefined
  */
 export default () => undefined;