Merge pull request #9995 from b1tjoy/fix/9183-prevent-avatar-icon-fro…

…m-flicker

fix: prevent avatar icon from flicker on Web

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>
         );

src/libs/getAvatarDefaultSource/index.js

@@ -0,0 +1,7 @@
+/**
+ * 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
+ */
+export default source => ({uri: source});

src/libs/getAvatarDefaultSource/index.native.js

@@ -0,0 +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;