diff --git a/src/components/CurrentUserPersonalDetailsSkeletonView/index.js b/src/components/CurrentUserPersonalDetailsSkeletonView/index.js
new file mode 100644
index 000000000000..6e6c46e971c0
--- /dev/null
+++ b/src/components/CurrentUserPersonalDetailsSkeletonView/index.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SkeletonViewContentLoader from 'react-content-loader/native';
+import {Circle, Rect} from 'react-native-svg';
+import {View} from 'react-native';
+import * as StyleUtils from '../../styles/StyleUtils';
+import CONST from '../../CONST';
+import themeColors from '../../styles/themes/default';
+import variables from '../../styles/variables';
+import styles from '../../styles/styles';
+
+const propTypes = {
+    /** Whether to animate the skeleton view */
+    shouldAnimate: PropTypes.bool,
+};
+
+const defaultProps = {
+    shouldAnimate: true,
+};
+
+function CurrentUserPersonalDetailsSkeletonView(props) {
+    const avatarPlaceholderSize = StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.LARGE);
+    const avatarPlaceholderRadius = avatarPlaceholderSize / 2;
+    const spaceBetweenAvatarAndHeadline = styles.mb3.marginBottom + styles.mt1.marginTop + (variables.lineHeightXXLarge - variables.fontSizeXLarge) / 2;
+    const headlineSize = variables.fontSizeXLarge;
+    const spaceBetweenHeadlineAndLabel = styles.mt1.marginTop + (variables.lineHeightXXLarge - variables.fontSizeXLarge) / 2;
+    const labelSize = variables.fontSizeLabel;
+    return (
+        <View style={styles.avatarSectionWrapperSkeleton}>
+            <SkeletonViewContentLoader
+                animate={props.shouldAnimate}
+                backgroundColor={themeColors.highlightBG}
+                foregroundColor={themeColors.border}
+                height={avatarPlaceholderSize + spaceBetweenAvatarAndHeadline + headlineSize + spaceBetweenHeadlineAndLabel + labelSize}
+            >
+                <Circle
+                    cx="50%"
+                    cy={avatarPlaceholderRadius}
+                    r={avatarPlaceholderRadius}
+                />
+                <Rect
+                    x="20%"
+                    y={avatarPlaceholderSize + spaceBetweenAvatarAndHeadline}
+                    width="60%"
+                    height={headlineSize}
+                />
+                <Rect
+                    x="15%"
+                    y={avatarPlaceholderSize + spaceBetweenAvatarAndHeadline + headlineSize + spaceBetweenHeadlineAndLabel}
+                    width="70%"
+                    height={labelSize}
+                />
+            </SkeletonViewContentLoader>
+        </View>
+    );
+}
+
+CurrentUserPersonalDetailsSkeletonView.displayName = 'CurrentUserPersonalDetailsSkeletonView';
+CurrentUserPersonalDetailsSkeletonView.propTypes = propTypes;
+CurrentUserPersonalDetailsSkeletonView.defaultProps = defaultProps;
+export default CurrentUserPersonalDetailsSkeletonView;
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index f74e9ac8dfbc..edcc92982c8b 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -1,9 +1,10 @@
 import lodashGet from 'lodash/get';
 import React from 'react';
-import {View, ScrollView} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
+import CurrentUserPersonalDetailsSkeletonView from '../../components/CurrentUserPersonalDetailsSkeletonView';
 import {withNetwork} from '../../components/OnyxProvider';
 import styles from '../../styles/styles';
 import Text from '../../components/Text';
@@ -21,7 +22,7 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize
 import compose from '../../libs/compose';
 import CONST from '../../CONST';
 import Permissions from '../../libs/Permissions';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../components/withCurrentUserPersonalDetails';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../../components/withCurrentUserPersonalDetails';
 import * as PaymentMethods from '../../libs/actions/PaymentMethods';
 import bankAccountPropTypes from '../../components/bankAccountPropTypes';
 import cardPropTypes from '../../components/cardPropTypes';
@@ -303,13 +304,6 @@ class InitialSettingsPage extends React.Component {
     }
 
     render() {
-        // On the very first sign in or after clearing storage these
-        // details will not be present on the first render so we'll just
-        // return nothing for now.
-        if (_.isEmpty(this.props.currentUserPersonalDetails)) {
-            return null;
-        }
-
         return (
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
                 {({safeAreaPaddingBottomStyle}) => (
@@ -320,49 +314,53 @@ class InitialSettingsPage extends React.Component {
                             style={[styles.settingsPageBackground]}
                         >
                             <View style={styles.w100}>
-                                <View style={styles.avatarSectionWrapper}>
-                                    <Tooltip text={this.props.translate('common.profile')}>
+                                {_.isEmpty(this.props.currentUserPersonalDetails) || _.isUndefined(this.props.currentUserPersonalDetails.displayName) ? (
+                                    <CurrentUserPersonalDetailsSkeletonView />
+                                ) : (
+                                    <View style={styles.avatarSectionWrapper}>
+                                        <Tooltip text={this.props.translate('common.profile')}>
+                                            <PressableWithoutFeedback
+                                                style={[styles.mb3]}
+                                                onPress={this.openProfileSettings}
+                                                accessibilityLabel={this.props.translate('common.profile')}
+                                                accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                                            >
+                                                <OfflineWithFeedback pendingAction={lodashGet(this.props.currentUserPersonalDetails, 'pendingFields.avatar', null)}>
+                                                    <Avatar
+                                                        imageStyles={[styles.avatarLarge]}
+                                                        source={UserUtils.getAvatar(this.props.currentUserPersonalDetails.avatar, this.props.session.accountID)}
+                                                        size={CONST.AVATAR_SIZE.LARGE}
+                                                    />
+                                                </OfflineWithFeedback>
+                                            </PressableWithoutFeedback>
+                                        </Tooltip>
                                         <PressableWithoutFeedback
-                                            style={[styles.mb3]}
+                                            style={[styles.mt1, styles.mw100]}
                                             onPress={this.openProfileSettings}
                                             accessibilityLabel={this.props.translate('common.profile')}
-                                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK}
                                         >
-                                            <OfflineWithFeedback pendingAction={lodashGet(this.props.currentUserPersonalDetails, 'pendingFields.avatar', null)}>
-                                                <Avatar
-                                                    imageStyles={[styles.avatarLarge]}
-                                                    source={UserUtils.getAvatar(this.props.currentUserPersonalDetails.avatar, this.props.session.accountID)}
-                                                    size={CONST.AVATAR_SIZE.LARGE}
-                                                />
-                                            </OfflineWithFeedback>
+                                            <Tooltip text={this.props.translate('common.profile')}>
+                                                <Text
+                                                    style={[styles.textHeadline, styles.pre]}
+                                                    numberOfLines={1}
+                                                >
+                                                    {this.props.currentUserPersonalDetails.displayName
+                                                        ? this.props.currentUserPersonalDetails.displayName
+                                                        : this.props.formatPhoneNumber(this.props.session.email)}
+                                                </Text>
+                                            </Tooltip>
                                         </PressableWithoutFeedback>
-                                    </Tooltip>
-                                    <PressableWithoutFeedback
-                                        style={[styles.mt1, styles.mw100]}
-                                        onPress={this.openProfileSettings}
-                                        accessibilityLabel={this.props.translate('common.profile')}
-                                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK}
-                                    >
-                                        <Tooltip text={this.props.translate('common.profile')}>
+                                        {Boolean(this.props.currentUserPersonalDetails.displayName) && (
                                             <Text
-                                                style={[styles.textHeadline, styles.pre]}
+                                                style={[styles.textLabelSupporting, styles.mt1]}
                                                 numberOfLines={1}
                                             >
-                                                {this.props.currentUserPersonalDetails.displayName
-                                                    ? this.props.currentUserPersonalDetails.displayName
-                                                    : this.props.formatPhoneNumber(this.props.session.email)}
+                                                {this.props.formatPhoneNumber(this.props.session.email)}
                                             </Text>
-                                        </Tooltip>
-                                    </PressableWithoutFeedback>
-                                    {Boolean(this.props.currentUserPersonalDetails.displayName) && (
-                                        <Text
-                                            style={[styles.textLabelSupporting, styles.mt1]}
-                                            numberOfLines={1}
-                                        >
-                                            {this.props.formatPhoneNumber(this.props.session.email)}
-                                        </Text>
-                                    )}
-                                </View>
+                                        )}
+                                    </View>
+                                )}
                                 {_.map(this.getDefaultMenuItems(), (item, index) => this.getMenuItem(item, index))}
 
                                 <ConfirmModal
diff --git a/src/styles/styles.js b/src/styles/styles.js
index c75514a9b53c..c6294adff946 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2356,6 +2356,12 @@ const styles = {
         paddingBottom: 20,
     },
 
+    avatarSectionWrapperSkeleton: {
+        width: '100%',
+        paddingHorizontal: 20,
+        paddingBottom: 20,
+    },
+
     selectCircle: {
         width: variables.componentSizeSmall,
         height: variables.componentSizeSmall,