Display skeleton avtar while loading

src/components/AvatarSkeleton.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import {Circle} from 'react-native-svg';
+import themeColors from '@styles/themes/default';
+import SkeletonViewContentLoader from './SkeletonViewContentLoader';
+
+function AvatarSkeleton() {
+    return (
+        <SkeletonViewContentLoader
+            animate
+            height={40}
+            backgroundColor={themeColors.skeletonLHNIn}
+            foregroundColor={themeColors.skeletonLHNOut}
+        >
+            <Circle
+                cx={20}
+                cy={20}
+                r={20}
+            />
+        </SkeletonViewContentLoader>
+    );
+}
+
+AvatarSkeleton.displayName = 'AvatarSkeleton';
+export default AvatarSkeleton;

src/components/AvatarWithIndicator.js

@@ -4,6 +4,7 @@ import {View} from 'react-native';
 import * as UserUtils from '@libs/UserUtils';
 import styles from '@styles/styles';
 import Avatar from './Avatar';
+import AvatarSkeleton from './AvatarSkeleton';
 import * as Expensicons from './Icon/Expensicons';
 import Indicator from './Indicator';
 import Tooltip from './Tooltip';
@@ -17,22 +18,32 @@ const propTypes = {
 
     /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
     fallbackIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+
+    /** Indicates whether the avatar is loaded or not  */
+    isLoading: PropTypes.bool,
 };
 
 const defaultProps = {
     tooltipText: '',
     fallbackIcon: Expensicons.FallbackAvatar,
+    isLoading: true,
 };
 
 function AvatarWithIndicator(props) {
     return (
         <Tooltip text={props.tooltipText}>
             <View style={[styles.sidebarAvatar]}>
-                <Avatar
-                    source={UserUtils.getSmallSizeAvatar(props.source)}
-                    fallbackIcon={props.fallbackIcon}
-                />
-                <Indicator />
+                {props.isLoading ? (
+                    <AvatarSkeleton />
+                ) : (
+                    <>
+                        <Avatar
+                            source={UserUtils.getSmallSizeAvatar(props.source)}
+                            fallbackIcon={props.fallbackIcon}
+                        />
+                        <Indicator />
+                    </>
+                )}
             </View>
         </Tooltip>
     );

src/pages/home/sidebar/PressableAvatarWithIndicator.js

@@ -2,15 +2,18 @@
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useCallback} from 'react';
+import {withOnyx} from 'react-native-onyx';
 import AvatarWithIndicator from '@components/AvatarWithIndicator';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
+import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as UserUtils from '@libs/UserUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
 const propTypes = {
@@ -19,6 +22,9 @@ const propTypes = {
 
     /** The personal details of the person who is logged in */
     currentUserPersonalDetails: personalDetailsPropType,
+
+    /** Indicates whether the app is loading initial data */
+    isLoading: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -28,9 +34,10 @@ const defaultProps = {
         accountID: '',
         avatar: '',
     },
+    isLoading: true,
 };
 
-function PressableAvatarWithIndicator({isCreateMenuOpen, currentUserPersonalDetails}) {
+function PressableAvatarWithIndicator({isCreateMenuOpen, currentUserPersonalDetails, isLoading}) {
     const {translate} = useLocalize();
 
     const showSettingsPage = useCallback(() => {
@@ -53,6 +60,7 @@ function PressableAvatarWithIndicator({isCreateMenuOpen, currentUserPersonalDeta
                     source={UserUtils.getAvatar(currentUserPersonalDetails.avatar, currentUserPersonalDetails.accountID)}
                     tooltipText={translate('common.settings')}
                     fallbackIcon={currentUserPersonalDetails.fallbackIcon}
+                    isLoading={isLoading && !currentUserPersonalDetails.avatar}
                 />
             </OfflineWithFeedback>
         </PressableWithoutFeedback>
@@ -62,4 +70,11 @@ function PressableAvatarWithIndicator({isCreateMenuOpen, currentUserPersonalDeta
 PressableAvatarWithIndicator.propTypes = propTypes;
 PressableAvatarWithIndicator.defaultProps = defaultProps;
 PressableAvatarWithIndicator.displayName = 'PressableAvatarWithIndicator';
-export default withCurrentUserPersonalDetails(PressableAvatarWithIndicator);
+export default compose(
+    withCurrentUserPersonalDetails,
+    withOnyx({
+        isLoading: {
+            key: ONYXKEYS.IS_LOADING_APP,
+        },
+    }),
+)(PressableAvatarWithIndicator);