Fix Not Found view briefly appears on workspace members and invite pages

src/components/WorkspaceMembersPlaceholder.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import styles from '../styles/styles';
+import Text from './Text';
+import OptionsListSkeletonView from './OptionsListSkeletonView';
+
+const propTypes = {
+    isLoaded: PropTypes.bool,
+    emptyText: PropTypes.string,
+};
+
+const defaultProps = {
+    isLoaded: false,
+    emptyText: undefined,
+};
+
+function WorkspaceMembersPlaceholder({isLoaded, emptyText}) {
+    return isLoaded && emptyText ? (
+        <View style={[styles.ph5]}>
+            <Text style={[styles.textLabel, styles.colorMuted]}>{emptyText}</Text>
+        </View>
+    ) : (
+        <OptionsListSkeletonView shouldAnimate />
+    );
+}
+
+WorkspaceMembersPlaceholder.displayName = 'WorkspaceMembersPlaceholder';
+WorkspaceMembersPlaceholder.propTypes = propTypes;
+WorkspaceMembersPlaceholder.defaultProps = defaultProps;
+
+export default WorkspaceMembersPlaceholder;

src/libs/actions/Policy.js

@@ -584,7 +584,15 @@ function updateGeneralSettings(policyID, name, currency) {
         },
     ];
 
-    API.write('UpdateWorkspaceGeneralSettings', {policyID, workspaceName: name, currency}, {optimisticData, successData, failureData});
+    API.write(
+        'UpdateWorkspaceGeneralSettings',
+        {policyID, workspaceName: name, currency},
+        {
+            optimisticData,
+            successData,
+            failureData,
+        },
+    );
 }
 
 /**

src/pages/workspace/WorkspaceInvitePage.js

@@ -1,4 +1,4 @@
-import React, {useState, useEffect, useMemo} from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
@@ -15,8 +15,7 @@ import FormAlertWithSubmitButton from '../../components/FormAlertWithSubmitButto
 import OptionsSelector from '../../components/OptionsSelector';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import CONST from '../../CONST';
-import {policyPropTypes, policyDefaultProps} from './withPolicy';
-import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
+import withPolicy, {policyDefaultProps, policyPropTypes} from './withPolicy';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
 import ROUTES from '../../ROUTES';
 import * as Browser from '../../libs/Browser';
@@ -52,12 +51,14 @@ const propTypes = {
         }),
     }).isRequired,
 
+    isLoadingReportData: PropTypes.bool,
     ...policyPropTypes,
 };
 
 const defaultProps = {
     personalDetails: {},
     betas: [],
+    isLoadingReportData: true,
     ...policyDefaultProps,
 };
 
@@ -201,7 +202,7 @@ function WorkspaceInvitePage(props) {
                 const sections = didScreenTransitionEnd ? getSections() : [];
                 return (
                     <FullPageNotFoundView
-                        shouldShow={_.isEmpty(props.policy) || !PolicyUtils.isPolicyAdmin(props.policy)}
+                        shouldShow={(_.isEmpty(props.policy) || !PolicyUtils.isPolicyAdmin(props.policy)) && !props.isLoadingReportData}
                         subtitleKey={_.isEmpty(props.policy) ? undefined : 'workspace.common.notAuthorized'}
                         onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
                     >
@@ -260,13 +261,16 @@ WorkspaceInvitePage.defaultProps = defaultProps;
 WorkspaceInvitePage.displayName = 'WorkspaceInvitePage';
 
 export default compose(
-    withPolicyAndFullscreenLoading,
+    withPolicy,
     withOnyx({
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
         },
         betas: {
             key: ONYXKEYS.BETAS,
         },
+        isLoadingReportData: {
+            key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+        },
     }),
 )(WorkspaceInvitePage);

src/pages/workspace/WorkspaceMembersPage.js

@@ -1,4 +1,4 @@
-import React, {useState, useEffect, useCallback} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import {View} from 'react-native';
@@ -21,8 +21,7 @@ import ConfirmModal from '../../components/ConfirmModal';
 import personalDetailsPropType from '../personalDetailsPropType';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
 import OptionRow from '../../components/OptionRow';
-import {policyPropTypes, policyDefaultProps} from './withPolicy';
-import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
+import withPolicy, {policyDefaultProps, policyPropTypes} from './withPolicy';
 import CONST from '../../CONST';
 import OfflineWithFeedback from '../../components/OfflineWithFeedback';
 import {withNetwork} from '../../components/OnyxProvider';
@@ -32,12 +31,13 @@ import * as UserUtils from '../../libs/UserUtils';
 import FormHelpMessage from '../../components/FormHelpMessage';
 import TextInput from '../../components/TextInput';
 import KeyboardDismissingFlatList from '../../components/KeyboardDismissingFlatList';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../components/withCurrentUserPersonalDetails';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../../components/withCurrentUserPersonalDetails';
 import * as PolicyUtils from '../../libs/PolicyUtils';
 import PressableWithFeedback from '../../components/Pressable/PressableWithFeedback';
 import usePrevious from '../../hooks/usePrevious';
 import Log from '../../libs/Log';
 import * as PersonalDetailsUtils from '../../libs/PersonalDetailsUtils';
+import WorkspaceMembersPlaceholder from '../../components/WorkspaceMembersPlaceholder';
 
 const propTypes = {
     /** All personal details asssociated with user */
@@ -58,6 +58,7 @@ const propTypes = {
         accountID: PropTypes.number,
     }),
 
+    isLoadingReportData: PropTypes.bool,
     ...policyPropTypes,
     ...withLocalizePropTypes,
     ...windowDimensionsPropTypes,
@@ -70,6 +71,7 @@ const defaultProps = {
     session: {
         accountID: 0,
     },
+    isLoadingReportData: true,
     ...policyDefaultProps,
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
@@ -93,7 +95,7 @@ function WorkspaceMembersPage(props) {
      */
     const validateSelection = useCallback(() => {
         const newErrors = {};
-        const ownerAccountID = _.first(PersonalDetailsUtils.getAccountIDsByLogins([props.policy.owner]));
+        const ownerAccountID = _.first(PersonalDetailsUtils.getAccountIDsByLogins(props.policy.owner ? [props.policy.owner] : []));
         _.each(selectedEmployees, (member) => {
             if (member !== ownerAccountID && member !== props.session.accountID) {
                 return;
@@ -405,7 +407,7 @@ function WorkspaceMembersPage(props) {
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView
-                    shouldShow={_.isEmpty(props.policy) || !PolicyUtils.isPolicyAdmin(props.policy)}
+                    shouldShow={(_.isEmpty(props.policy) || !PolicyUtils.isPolicyAdmin(props.policy)) && !props.isLoadingReportData}
                     subtitleKey={_.isEmpty(props.policy) ? undefined : 'workspace.common.notAuthorized'}
                     onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
                 >
@@ -492,8 +494,11 @@ function WorkspaceMembersPage(props) {
                                 />
                             </View>
                         ) : (
-                            <View style={[styles.ph5]}>
-                                <Text style={[styles.textLabel, styles.colorMuted]}>{props.translate('workspace.common.memberNotFound')}</Text>
+                            <View style={styles.flex1}>
+                                <WorkspaceMembersPlaceholder
+                                    isLoaded={OptionsListUtils.isPersonalDetailsReady(props.personalDetails) && !_.isEmpty(props.policyMembers)}
+                                    emptyText={props.translate('workspace.common.memberNotFound')}
+                                />
                             </View>
                         )}
                     </View>
@@ -510,7 +515,7 @@ WorkspaceMembersPage.displayName = 'WorkspaceMembersPage';
 export default compose(
     withLocalize,
     withWindowDimensions,
-    withPolicyAndFullscreenLoading,
+    withPolicy,
     withNetwork(),
     withOnyx({
         personalDetails: {
@@ -519,6 +524,9 @@ export default compose(
         session: {
             key: ONYXKEYS.SESSION,
         },
+        isLoadingReportData: {
+            key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+        },
     }),
     withCurrentUserPersonalDetails,
 )(WorkspaceMembersPage);