diff --git a/src/pages/home/report/withReportOrNotFound.js b/src/pages/home/report/withReportOrNotFound.js
index 204965e25bd8..ec561db20c81 100644
--- a/src/pages/home/report/withReportOrNotFound.js
+++ b/src/pages/home/report/withReportOrNotFound.js
@@ -6,6 +6,7 @@ import getComponentDisplayName from '../../../libs/getComponentDisplayName';
 import NotFoundPage from '../../ErrorPage/NotFoundPage';
 import ONYXKEYS from '../../../ONYXKEYS';
 import reportPropTypes from '../../reportPropTypes';
+import FullscreenLoadingIndicator from '../../../components/FullscreenLoadingIndicator';
 
 export default function (WrappedComponent) {
     const propTypes = {
@@ -15,15 +16,22 @@ export default function (WrappedComponent) {
 
         /** The report currently being looked at */
         report: reportPropTypes,
+
+        /** Indicated whether the report data is loading */
+        isLoadingReportData: PropTypes.bool,
     };
 
     const defaultProps = {
         forwardedRef: () => {},
         report: {},
+        isLoadingReportData: true,
     };
 
     class WithReportOrNotFound extends Component {
         render() {
+            if (this.props.isLoadingReportData && (_.isEmpty(this.props.report) || !this.props.report.reportID)) {
+                return <FullscreenLoadingIndicator />;
+            }
             if (_.isEmpty(this.props.report) || !this.props.report.reportID) {
                 return <NotFoundPage />;
             }
@@ -56,5 +64,8 @@ export default function (WrappedComponent) {
         report: {
             key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
         },
+        isLoadingReportData: {
+            key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+        },
     })(withReportOrNotFound);
 }
diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js
index 01a434fa5ae5..d37191c770ec 100644
--- a/src/pages/workspace/WorkspaceInitialPage.js
+++ b/src/pages/workspace/WorkspaceInitialPage.js
@@ -18,7 +18,8 @@ import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import compose from '../../libs/compose';
 import Avatar from '../../components/Avatar';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
-import withPolicy, {policyPropTypes, policyDefaultProps} from './withPolicy';
+import {policyPropTypes, policyDefaultProps} from './withPolicy';
+import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
 import reportPropTypes from '../reportPropTypes';
 import * as Policy from '../../libs/actions/Policy';
 import * as PolicyUtils from '../../libs/PolicyUtils';
@@ -235,7 +236,7 @@ WorkspaceInitialPage.displayName = 'WorkspaceInitialPage';
 
 export default compose(
     withLocalize,
-    withPolicy,
+    withPolicyAndFullscreenLoading,
     withWindowDimensions,
     withOnyx({
         reports: {
diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js
index 1384ca8dc89a..e47ee4f7bdf8 100644
--- a/src/pages/workspace/WorkspaceInviteMessagePage.js
+++ b/src/pages/workspace/WorkspaceInviteMessagePage.js
@@ -18,7 +18,8 @@ import MultipleAvatars from '../../components/MultipleAvatars';
 import CONST from '../../CONST';
 import * as Link from '../../libs/actions/Link';
 import Text from '../../components/Text';
-import withPolicy, {policyPropTypes, policyDefaultProps} from './withPolicy';
+import {policyPropTypes, policyDefaultProps} from './withPolicy';
+import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import ROUTES from '../../ROUTES';
 import * as Localize from '../../libs/Localize';
@@ -219,7 +220,7 @@ WorkspaceInviteMessagePage.defaultProps = defaultProps;
 
 export default compose(
     withLocalize,
-    withPolicy,
+    withPolicyAndFullscreenLoading,
     withOnyx({
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS,
diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
index 67f9a1bbb11c..a69c3fa7eeb5 100644
--- a/src/pages/workspace/WorkspaceInvitePage.js
+++ b/src/pages/workspace/WorkspaceInvitePage.js
@@ -18,7 +18,8 @@ import OptionsSelector from '../../components/OptionsSelector';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import CONST from '../../CONST';
 import * as Link from '../../libs/actions/Link';
-import withPolicy, {policyPropTypes, policyDefaultProps} from './withPolicy';
+import {policyPropTypes, policyDefaultProps} from './withPolicy';
+import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
 import {withNetwork} from '../../components/OnyxProvider';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
 import networkPropTypes from '../../components/networkPropTypes';
@@ -256,57 +257,55 @@ class WorkspaceInvitePage extends React.Component {
 
         return (
             <ScreenWrapper shouldEnableMaxHeight>
-                {({didScreenTransitionEnd}) => (
-                    <FullPageNotFoundView
-                        shouldShow={_.isEmpty(this.props.policy)}
-                        onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
+                <FullPageNotFoundView
+                    shouldShow={_.isEmpty(this.props.policy)}
+                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
+                >
+                    <FormSubmit
+                        style={[styles.flex1]}
+                        onSubmit={this.inviteUser}
                     >
-                        <FormSubmit
-                            style={[styles.flex1]}
-                            onSubmit={this.inviteUser}
-                        >
-                            <HeaderWithCloseButton
-                                title={this.props.translate('workspace.invite.invitePeople')}
-                                subtitle={policyName}
-                                onCloseButtonPress={() => this.clearErrors(true)}
-                                shouldShowGetAssistanceButton
-                                guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS}
-                                shouldShowBackButton
-                                onBackButtonPress={() => Navigation.goBack()}
+                        <HeaderWithCloseButton
+                            title={this.props.translate('workspace.invite.invitePeople')}
+                            subtitle={policyName}
+                            onCloseButtonPress={() => this.clearErrors(true)}
+                            shouldShowGetAssistanceButton
+                            guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS}
+                            shouldShowBackButton
+                            onBackButtonPress={() => Navigation.goBack()}
+                        />
+                        <View style={[styles.flex1]}>
+                            <OptionsSelector
+                                autoFocus={false}
+                                canSelectMultipleOptions
+                                sections={sections}
+                                selectedOptions={this.state.selectedOptions}
+                                value={this.state.searchTerm}
+                                shouldShowOptions={OptionsListUtils.isPersonalDetailsReady(this.props.personalDetails)}
+                                onSelectRow={this.toggleOption}
+                                onChangeText={this.updateOptionsWithSearchTerm}
+                                onConfirmSelection={this.inviteUser}
+                                headerMessage={headerMessage}
+                                hideSectionHeaders
+                                boldStyle
+                                shouldFocusOnSelectRow
+                                textInputLabel={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
                             />
-                            <View style={[styles.flex1]}>
-                                <OptionsSelector
-                                    autoFocus={false}
-                                    canSelectMultipleOptions
-                                    sections={sections}
-                                    selectedOptions={this.state.selectedOptions}
-                                    value={this.state.searchTerm}
-                                    shouldShowOptions={didScreenTransitionEnd && OptionsListUtils.isPersonalDetailsReady(this.props.personalDetails)}
-                                    onSelectRow={this.toggleOption}
-                                    onChangeText={this.updateOptionsWithSearchTerm}
-                                    onConfirmSelection={this.inviteUser}
-                                    headerMessage={headerMessage}
-                                    hideSectionHeaders
-                                    boldStyle
-                                    shouldFocusOnSelectRow
-                                    textInputLabel={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
-                                />
-                            </View>
-                            <View style={[styles.flexShrink0]}>
-                                <FormAlertWithSubmitButton
-                                    isDisabled={!this.state.selectedOptions.length}
-                                    isAlertVisible={this.getShouldShowAlertPrompt()}
-                                    buttonText={this.props.translate('common.next')}
-                                    onSubmit={this.inviteUser}
-                                    message={this.props.policy.alertMessage}
-                                    containerStyles={[styles.flexReset, styles.flexGrow0, styles.flexShrink0, styles.flexBasisAuto, styles.mb5]}
-                                    enabledWhenOffline
-                                    disablePressOnEnter
-                                />
-                            </View>
-                        </FormSubmit>
-                    </FullPageNotFoundView>
-                )}
+                        </View>
+                        <View style={[styles.flexShrink0]}>
+                            <FormAlertWithSubmitButton
+                                isDisabled={!this.state.selectedOptions.length}
+                                isAlertVisible={this.getShouldShowAlertPrompt()}
+                                buttonText={this.props.translate('common.next')}
+                                onSubmit={this.inviteUser}
+                                message={this.props.policy.alertMessage}
+                                containerStyles={[styles.flexReset, styles.flexGrow0, styles.flexShrink0, styles.flexBasisAuto, styles.mb5]}
+                                enabledWhenOffline
+                                disablePressOnEnter
+                            />
+                        </View>
+                    </FormSubmit>
+                </FullPageNotFoundView>
             </ScreenWrapper>
         );
     }
@@ -317,7 +316,7 @@ WorkspaceInvitePage.defaultProps = defaultProps;
 
 export default compose(
     withLocalize,
-    withPolicy,
+    withPolicyAndFullscreenLoading,
     withNetwork(),
     withOnyx({
         personalDetails: {
diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js
index 0e9739a74f8e..c9d6deab2b0e 100644
--- a/src/pages/workspace/WorkspaceMembersPage.js
+++ b/src/pages/workspace/WorkspaceMembersPage.js
@@ -21,7 +21,8 @@ import ConfirmModal from '../../components/ConfirmModal';
 import personalDetailsPropType from '../personalDetailsPropType';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
 import OptionRow from '../../components/OptionRow';
-import withPolicy, {policyPropTypes, policyDefaultProps} from './withPolicy';
+import {policyPropTypes, policyDefaultProps} from './withPolicy';
+import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
 import CONST from '../../CONST';
 import OfflineWithFeedback from '../../components/OfflineWithFeedback';
 import {withNetwork} from '../../components/OnyxProvider';
@@ -501,7 +502,7 @@ WorkspaceMembersPage.defaultProps = defaultProps;
 export default compose(
     withLocalize,
     withWindowDimensions,
-    withPolicy,
+    withPolicyAndFullscreenLoading,
     withNetwork(),
     withOnyx({
         personalDetails: {
diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js
index 14cc6ac01403..8edafe18d950 100644
--- a/src/pages/workspace/WorkspacePageWithSections.js
+++ b/src/pages/workspace/WorkspacePageWithSections.js
@@ -16,7 +16,7 @@ import * as BankAccounts from '../../libs/actions/BankAccounts';
 import BankAccount from '../../libs/models/BankAccount';
 import * as ReimbursementAccountProps from '../ReimbursementAccount/reimbursementAccountPropTypes';
 import userPropTypes from '../settings/userPropTypes';
-import withPolicy from './withPolicy';
+import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
 import {withNetwork} from '../../components/OnyxProvider';
 import networkPropTypes from '../../components/networkPropTypes';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
@@ -153,6 +153,6 @@ export default compose(
             key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
         },
     }),
-    withPolicy,
+    withPolicyAndFullscreenLoading,
     withNetwork(),
 )(WorkspacePageWithSections);
diff --git a/src/pages/workspace/withPolicyAndFullscreenLoading.js b/src/pages/workspace/withPolicyAndFullscreenLoading.js
new file mode 100644
index 000000000000..1d5cc395c80e
--- /dev/null
+++ b/src/pages/workspace/withPolicyAndFullscreenLoading.js
@@ -0,0 +1,64 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
+import compose from '../../libs/compose';
+import ONYXKEYS from '../../ONYXKEYS';
+import withPolicy, {policyPropTypes, policyDefaultProps} from './withPolicy';
+import getComponentDisplayName from '../../libs/getComponentDisplayName';
+import FullscreenLoadingIndicator from '../../components/FullscreenLoadingIndicator';
+
+export default function (WrappedComponent) {
+    const propTypes = {
+        /** The HOC takes an optional ref as a prop and passes it as a ref to the wrapped component.
+         * That way, if a ref is passed to a component wrapped in the HOC, the ref is a reference to the wrapped component, not the HOC. */
+        forwardedRef: PropTypes.func,
+
+        /** Indicated whether the report data is loading */
+        isLoadingReportData: PropTypes.bool,
+
+        ...policyPropTypes,
+    };
+
+    const defaultProps = {
+        forwardedRef: () => {},
+        isLoadingReportData: true,
+        ...policyDefaultProps,
+    };
+
+    const WithPolicyAndFullscreenLoading = (props) => {
+        if (props.isLoadingReportData && _.isEmpty(props.policy)) {
+            return <FullscreenLoadingIndicator />;
+        }
+
+        const rest = _.omit(props, ['forwardedRef']);
+        return (
+            <WrappedComponent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...rest}
+                ref={props.forwardedRef}
+            />
+        );
+    };
+
+    WithPolicyAndFullscreenLoading.propTypes = propTypes;
+    WithPolicyAndFullscreenLoading.defaultProps = defaultProps;
+    WithPolicyAndFullscreenLoading.displayName = `WithPolicyAndFullscreenLoading(${getComponentDisplayName(WrappedComponent)})`;
+
+    const withPolicyAndFullscreenLoading = React.forwardRef((props, ref) => (
+        <WithPolicyAndFullscreenLoading
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            forwardedRef={ref}
+        />
+    ));
+
+    return compose(
+        withPolicy,
+        withOnyx({
+            isLoadingReportData: {
+                key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+            },
+        }),
+    )(withPolicyAndFullscreenLoading);
+}