diff --git a/src/pages/WorkspaceSwitcherPage/index.tsx b/src/pages/WorkspaceSwitcherPage/index.tsx
index cb52c52cb64c..4f2d07689766 100644
--- a/src/pages/WorkspaceSwitcherPage/index.tsx
+++ b/src/pages/WorkspaceSwitcherPage/index.tsx
@@ -1,6 +1,7 @@
import {useIsFocused} from '@react-navigation/native';
import React, {useCallback, useMemo} from 'react';
import {useOnyx} from 'react-native-onyx';
+import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import * as Expensicons from '@components/Icon/Expensicons';
import ScreenWrapper from '@components/ScreenWrapper';
@@ -11,6 +12,7 @@ import useActiveWorkspace from '@hooks/useActiveWorkspace';
import useDebouncedState from '@hooks/useDebouncedState';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
import Navigation from '@libs/Navigation/Navigation';
import * as PolicyUtils from '@libs/PolicyUtils';
import {sortWorkspacesBySelected} from '@libs/PolicyUtils';
@@ -34,6 +36,7 @@ const WorkspaceCardCreateAWorkspaceInstance = ;
function WorkspaceSwitcherPage() {
const {isOffline} = useNetwork();
+ const styles = useThemeStyles();
const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
const {translate} = useLocalize();
const {activeWorkspaceID, setActiveWorkspaceID} = useActiveWorkspace();
@@ -43,9 +46,10 @@ function WorkspaceSwitcherPage() {
const [reportActions] = useOnyx(ONYXKEYS.COLLECTION.REPORT_ACTIONS);
const [policies, fetchStatus] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
const [currentUserLogin] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.email});
-
+ const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP);
const brickRoadsForPolicies = useMemo(() => getWorkspacesBrickRoads(reports, policies, reportActions), [reports, policies, reportActions]);
const unreadStatusesForPolicies = useMemo(() => getWorkspacesUnreadStatuses(reports), [reports]);
+ const shouldShowLoadingIndicator = isLoadingApp && !isOffline;
const getIndicatorTypeForPolicy = useCallback(
(policyId?: string) => {
@@ -157,23 +161,27 @@ function WorkspaceSwitcherPage() {
title={translate('workspace.switcher.headerTitle')}
onBackButtonPress={Navigation.goBack}
/>
-
- ListItem={UserListItem}
- sections={sections}
- onSelectRow={(option) => selectPolicy(option.policyID)}
- textInputLabel={usersWorkspaces.length >= CONST.STANDARD_LIST_ITEM_LIMIT ? translate('common.search') : undefined}
- textInputValue={searchTerm}
- onChangeText={setSearchTerm}
- headerMessage={headerMessage}
- listEmptyContent={WorkspaceCardCreateAWorkspaceInstance}
- shouldShowListEmptyContent={shouldShowCreateWorkspace}
- initiallyFocusedOptionKey={activeWorkspaceID ?? CONST.WORKSPACE_SWITCHER.NAME}
- showLoadingPlaceholder={fetchStatus.status === 'loading' || !didScreenTransitionEnd}
- showConfirmButton={!!activeWorkspaceID}
- shouldUseDefaultTheme
- confirmButtonText={translate('workspace.common.clearFilter')}
- onConfirm={() => selectPolicy(undefined)}
- />
+ {shouldShowLoadingIndicator ? (
+
+ ) : (
+
+ ListItem={UserListItem}
+ sections={sections}
+ onSelectRow={(option) => selectPolicy(option.policyID)}
+ textInputLabel={usersWorkspaces.length >= CONST.STANDARD_LIST_ITEM_LIMIT ? translate('common.search') : undefined}
+ textInputValue={searchTerm}
+ onChangeText={setSearchTerm}
+ headerMessage={headerMessage}
+ listEmptyContent={WorkspaceCardCreateAWorkspaceInstance}
+ shouldShowListEmptyContent={shouldShowCreateWorkspace}
+ initiallyFocusedOptionKey={activeWorkspaceID ?? CONST.WORKSPACE_SWITCHER.NAME}
+ showLoadingPlaceholder={fetchStatus.status === 'loading' || !didScreenTransitionEnd}
+ showConfirmButton={!!activeWorkspaceID}
+ shouldUseDefaultTheme
+ confirmButtonText={translate('workspace.common.clearFilter')}
+ onConfirm={() => selectPolicy(undefined)}
+ />
+ )}
>
)}
diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx
index 591f97064ea1..c27e27f13af4 100755
--- a/src/pages/workspace/WorkspacesListPage.tsx
+++ b/src/pages/workspace/WorkspacesListPage.tsx
@@ -6,6 +6,7 @@ import Button from '@components/Button';
import ConfirmModal from '@components/ConfirmModal';
import FeatureList from '@components/FeatureList';
import type {FeatureListItem} from '@components/FeatureList';
+import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import * as Expensicons from '@components/Icon/Expensicons';
import * as Illustrations from '@components/Icon/Illustrations';
@@ -113,6 +114,8 @@ function WorkspacesListPage() {
const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
const [session] = useOnyx(ONYXKEYS.SESSION);
+ const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP);
+ const shouldShowLoadingIndicator = isLoadingApp && !isOffline;
const {activeWorkspaceID, setActiveWorkspaceID} = useActiveWorkspace();
@@ -419,22 +422,26 @@ function WorkspacesListPage() {
icon={Illustrations.Buildings}
shouldUseHeadlineHeader
/>
-
-
- interceptAnonymousUser(() => App.createWorkspaceWithPolicyDraftAndNavigateToIt())}
- illustration={LottieAnimations.WorkspacePlanet}
- // We use this style to vertically center the illustration, as the original illustration is not centered
- illustrationStyle={styles.emptyWorkspaceIllustrationStyle}
- titleStyles={styles.textHeadlineH1}
- />
-
-
+ {shouldShowLoadingIndicator ? (
+
+ ) : (
+
+
+ interceptAnonymousUser(() => App.createWorkspaceWithPolicyDraftAndNavigateToIt())}
+ illustration={LottieAnimations.WorkspacePlanet}
+ // We use this style to vertically center the illustration, as the original illustration is not centered
+ illustrationStyle={styles.emptyWorkspaceIllustrationStyle}
+ titleStyles={styles.textHeadlineH1}
+ />
+
+
+ )}
);
}