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