diff --git a/src/components/NewDatePicker/index.js b/src/components/NewDatePicker/index.js
index 75d1520293f4..0b6346c93897 100644
--- a/src/components/NewDatePicker/index.js
+++ b/src/components/NewDatePicker/index.js
@@ -56,6 +56,13 @@ class NewDatePicker extends React.Component {
         this.defaultValue = props.defaultValue ? moment(props.defaultValue).format(CONST.DATE.MOMENT_FORMAT_STRING) : '';
     }
 
+    componentDidUpdate(prevProps) {
+        if (prevProps.value === this.props.value) {
+            return;
+        }
+        this.setDate(this.props.value);
+    }
+
     /**
      * Trigger the `onInputChange` handler when the user input has a complete date or is cleared
      * @param {string} selectedDate
diff --git a/src/hooks/usePrivatePersonalDetails.js b/src/hooks/usePrivatePersonalDetails.js
new file mode 100644
index 000000000000..37eb63dcd0fd
--- /dev/null
+++ b/src/hooks/usePrivatePersonalDetails.js
@@ -0,0 +1,17 @@
+import {useEffect, useContext} from 'react';
+import * as PersonalDetails from '../libs/actions/PersonalDetails';
+import {NetworkContext} from '../components/OnyxProvider';
+
+/**
+ * Hook for fetching private personal details
+ */
+export default function usePrivatePersonalDetails() {
+    const {isOffline} = useContext(NetworkContext);
+
+    useEffect(() => {
+        if (isOffline || Boolean(PersonalDetails.getPrivatePersonalDetails())) {
+            return;
+        }
+        PersonalDetails.openPersonalDetailsPage();
+    }, [isOffline]);
+}
diff --git a/src/libs/actions/PersonalDetails.js b/src/libs/actions/PersonalDetails.js
index 9cf64e44038b..50c47eae340a 100644
--- a/src/libs/actions/PersonalDetails.js
+++ b/src/libs/actions/PersonalDetails.js
@@ -26,6 +26,12 @@ Onyx.connect({
     callback: (val) => (allPersonalDetails = val),
 });
 
+let privatePersonalDetails;
+Onyx.connect({
+    key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
+    callback: (val) => (privatePersonalDetails = val),
+});
+
 /**
  * Returns the displayName for a user
  *
@@ -325,7 +331,37 @@ function updateSelectedTimezone(selectedTimezone) {
  * Fetches additional personal data like legal name, date of birth, address
  */
 function openPersonalDetailsPage() {
-    API.read('OpenPersonalDetailsPage');
+    const optimisticData = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
+            value: {
+                isLoading: true,
+            },
+        },
+    ];
+
+    const successData = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
+            value: {
+                isLoading: false,
+            },
+        },
+    ];
+
+    const failureData = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
+            value: {
+                isLoading: false,
+            },
+        },
+    ];
+
+    API.read('OpenPersonalDetailsPage', {}, {optimisticData, successData, failureData});
 }
 
 /**
@@ -478,6 +514,14 @@ function clearAvatarErrors() {
     });
 }
 
+/**
+ * Get private personal details value
+ * @returns {Object}
+ */
+function getPrivatePersonalDetails() {
+    return privatePersonalDetails;
+}
+
 export {
     getDisplayName,
     getDisplayNameForTypingIndicator,
@@ -495,4 +539,5 @@ export {
     updateAutomaticTimezone,
     updateSelectedTimezone,
     getCountryISO,
+    getPrivatePersonalDetails,
 };
diff --git a/src/pages/settings/Profile/PersonalDetails/AddressPage.js b/src/pages/settings/Profile/PersonalDetails/AddressPage.js
index 121065ae4097..2777b09cff7c 100644
--- a/src/pages/settings/Profile/PersonalDetails/AddressPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/AddressPage.js
@@ -21,6 +21,8 @@ import CountryPicker from '../../../../components/CountryPicker';
 import StatePicker from '../../../../components/StatePicker';
 import Navigation from '../../../../libs/Navigation/Navigation';
 import ROUTES from '../../../../ROUTES';
+import usePrivatePersonalDetails from '../../../../hooks/usePrivatePersonalDetails';
+import FullscreenLoadingIndicator from '../../../../components/FullscreenLoadingIndicator';
 
 const propTypes = {
     /* Onyx Props */
@@ -61,6 +63,7 @@ function updateAddress(values) {
 }
 
 function AddressPage(props) {
+    usePrivatePersonalDetails();
     const {translate} = props;
     const [countryISO, setCountryISO] = useState(PersonalDetails.getCountryISO(lodashGet(props.privatePersonalDetails, 'address.country')) || CONST.COUNTRY.US);
     const isUSAForm = countryISO === CONST.COUNTRY.US;
@@ -117,6 +120,10 @@ function AddressPage(props) {
         return errors;
     }, []);
 
+    if (lodashGet(props.privatePersonalDetails, 'isLoading', true)) {
+        return <FullscreenLoadingIndicator />;
+    }
+
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
             <HeaderWithBackButton
diff --git a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
index 422e31ee9fdf..fa73d2b1a69a 100644
--- a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
@@ -2,6 +2,7 @@ import moment from 'moment';
 import PropTypes from 'prop-types';
 import React, {useCallback} from 'react';
 import {withOnyx} from 'react-native-onyx';
+import lodashGet from 'lodash/get';
 import CONST from '../../../../CONST';
 import ONYXKEYS from '../../../../ONYXKEYS';
 import ROUTES from '../../../../ROUTES';
@@ -15,6 +16,8 @@ import * as ValidationUtils from '../../../../libs/ValidationUtils';
 import * as PersonalDetails from '../../../../libs/actions/PersonalDetails';
 import compose from '../../../../libs/compose';
 import styles from '../../../../styles/styles';
+import usePrivatePersonalDetails from '../../../../hooks/usePrivatePersonalDetails';
+import FullscreenLoadingIndicator from '../../../../components/FullscreenLoadingIndicator';
 
 const propTypes = {
     /* Onyx Props */
@@ -34,6 +37,8 @@ const defaultProps = {
 };
 
 function DateOfBirthPage({translate, privatePersonalDetails}) {
+    usePrivatePersonalDetails();
+
     /**
      * @param {Object} values
      * @param {String} values.dob - date of birth
@@ -55,6 +60,10 @@ function DateOfBirthPage({translate, privatePersonalDetails}) {
         return errors;
     }, []);
 
+    if (lodashGet(privatePersonalDetails, 'isLoading', true)) {
+        return <FullscreenLoadingIndicator />;
+    }
+
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
             <HeaderWithBackButton
diff --git a/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js b/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js
index c6a2c740a0e1..8202aa40c678 100644
--- a/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js
+++ b/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js
@@ -17,6 +17,8 @@ import * as PersonalDetails from '../../../../libs/actions/PersonalDetails';
 import compose from '../../../../libs/compose';
 import Navigation from '../../../../libs/Navigation/Navigation';
 import ROUTES from '../../../../ROUTES';
+import usePrivatePersonalDetails from '../../../../hooks/usePrivatePersonalDetails';
+import FullscreenLoadingIndicator from '../../../../components/FullscreenLoadingIndicator';
 
 const propTypes = {
     /* Onyx Props */
@@ -42,6 +44,7 @@ const updateLegalName = (values) => {
 };
 
 function LegalNamePage(props) {
+    usePrivatePersonalDetails();
     const legalFirstName = lodashGet(props.privatePersonalDetails, 'legalFirstName', '');
     const legalLastName = lodashGet(props.privatePersonalDetails, 'legalLastName', '');
 
@@ -63,6 +66,10 @@ function LegalNamePage(props) {
         return errors;
     }, []);
 
+    if (lodashGet(props.privatePersonalDetails, 'isLoading', true)) {
+        return <FullscreenLoadingIndicator />;
+    }
+
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
diff --git a/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js b/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
index c155e232295f..e22aeca6a3d8 100644
--- a/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
@@ -1,7 +1,8 @@
-import React, {useEffect} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import lodashGet from 'lodash/get';
 import ScreenWrapper from '../../../../components/ScreenWrapper';
 import HeaderWithBackButton from '../../../../components/HeaderWithBackButton';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
@@ -11,9 +12,10 @@ import styles from '../../../../styles/styles';
 import Navigation from '../../../../libs/Navigation/Navigation';
 import compose from '../../../../libs/compose';
 import MenuItemWithTopDescription from '../../../../components/MenuItemWithTopDescription';
-import * as PersonalDetails from '../../../../libs/actions/PersonalDetails';
 import ONYXKEYS from '../../../../ONYXKEYS';
 import {withNetwork} from '../../../../components/OnyxProvider';
+import usePrivatePersonalDetails from '../../../../hooks/usePrivatePersonalDetails';
+import FullscreenLoadingIndicator from '../../../../components/FullscreenLoadingIndicator';
 
 const propTypes = {
     /* Onyx Props */
@@ -54,13 +56,7 @@ const defaultProps = {
 };
 
 function PersonalDetailsInitialPage(props) {
-    useEffect(() => {
-        if (props.network.isOffline) {
-            return;
-        }
-        PersonalDetails.openPersonalDetailsPage();
-    }, [props.network.isOffline]);
-
+    usePrivatePersonalDetails();
     const privateDetails = props.privatePersonalDetails || {};
     const address = privateDetails.address || {};
     const legalName = `${privateDetails.legalFirstName || ''} ${privateDetails.legalLastName || ''}`.trim();
@@ -87,6 +83,10 @@ function PersonalDetailsInitialPage(props) {
         return formattedAddress.trim().replace(/,$/, '');
     };
 
+    if (lodashGet(props.privatePersonalDetails, 'isLoading', true)) {
+        return <FullscreenLoadingIndicator />;
+    }
+
     return (
         <ScreenWrapper>
             <HeaderWithBackButton