diff --git a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js index f45f9ee154f6..579e2b962cee 100644 --- a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js +++ b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js @@ -25,6 +25,7 @@ import themeColors from '../../../../styles/themes/default'; import NotFoundPage from '../../../ErrorPage/NotFoundPage'; import ValidateCodeForm from './ValidateCodeForm'; import ROUTES from '../../../../ROUTES'; +import FullscreenLoadingIndicator from '../../../../components/FullscreenLoadingIndicator'; const propTypes = { /* Onyx Props */ @@ -68,6 +69,9 @@ const propTypes = { }), }), + /** Indicated whether the report data is loading */ + isLoadingReportData: PropTypes.bool, + ...withLocalizePropTypes, }; @@ -83,6 +87,7 @@ const defaultProps = { contactMethod: '', }, }, + isLoadingReportData: true, }; class ContactMethodDetailsPage extends Component { @@ -194,6 +199,10 @@ class ContactMethodDetailsPage extends Component { // Replacing spaces with "hard spaces" to prevent breaking the number const formattedContactMethod = Str.isSMSLogin(contactMethod) ? this.props.formatPhoneNumber(contactMethod).replace(/ /g, '\u00A0') : contactMethod; + if (this.props.isLoadingReportData && _.isEmpty(this.props.loginList)) { + return ; + } + const loginData = this.props.loginList[contactMethod]; if (!contactMethod || !loginData) { return ; @@ -302,5 +311,8 @@ export default compose( securityGroups: { key: `${ONYXKEYS.COLLECTION.SECURITY_GROUP}`, }, + isLoadingReportData: { + key: `${ONYXKEYS.IS_LOADING_REPORT_DATA}`, + }, }), )(ContactMethodDetailsPage);