Merge pull request Expensify#54238 from twilight2294/patch-19

Feature: Add spinning loader until full list of policies is successfully download on the client
dukenv0307 · Dec 30, 2024 · 9d6bdda · 9d6bdda
2 parents 170985d + 20c1550
commit 9d6bdda
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 34 deletions.
diff --git 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 = <WorkspaceCardCreateAWorkspace />;
 
 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}
                     />
-                    <SelectionList<WorkspaceListItem>
-                        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 ? (
+                        <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
+                    ) : (
+                        <SelectionList<WorkspaceListItem>
+                            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)}
+                        />
+                    )}
                 </>
             )}
         </ScreenWrapper>

diff --git 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
                 />
-                <ScrollView contentContainerStyle={styles.pt3}>
-                    <View style={[styles.flex1, isLessThanMediumScreen ? styles.workspaceSectionMobile : styles.workspaceSection]}>
-                        <FeatureList
-                            menuItems={workspaceFeatures}
-                            title={translate('workspace.emptyWorkspace.title')}
-                            subtitle={translate('workspace.emptyWorkspace.subtitle')}
-                            ctaText={translate('workspace.new.newWorkspace')}
-                            ctaAccessibilityLabel={translate('workspace.new.newWorkspace')}
-                            onCtaPress={() => 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}
-                        />
-                    </View>
-                </ScrollView>
+                {shouldShowLoadingIndicator ? (
+                    <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
+                ) : (
+                    <ScrollView contentContainerStyle={styles.pt3}>
+                        <View style={[styles.flex1, isLessThanMediumScreen ? styles.workspaceSectionMobile : styles.workspaceSection]}>
+                            <FeatureList
+                                menuItems={workspaceFeatures}
+                                title={translate('workspace.emptyWorkspace.title')}
+                                subtitle={translate('workspace.emptyWorkspace.subtitle')}
+                                ctaText={translate('workspace.new.newWorkspace')}
+                                ctaAccessibilityLabel={translate('workspace.new.newWorkspace')}
+                                onCtaPress={() => 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}
+                            />
+                        </View>
+                    </ScrollView>
+                )}
             </ScreenWrapper>
         );
     }