[No QA] Add reasonAttributes to FullscreenLoadingIndicator usages in workspace pages

src/pages/workspace/AccessOrNotFoundWrapper.tsx

@@ -16,6 +16,7 @@ import goBackFromWorkspaceSettingPages from '@libs/Navigation/helpers/goBackFrom
 import Navigation from '@libs/Navigation/Navigation';
 import {canSendInvoice, isControlPolicy, isPaidGroupPolicy, isPolicyAccessible, isPolicyAdmin, isPolicyFeatureEnabled as isPolicyFeatureEnabledUtil} from '@libs/PolicyUtils';
 import {canCreateRequest} from '@libs/ReportUtils';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import type {IOUType} from '@src/CONST';
 import CONST from '@src/CONST';
@@ -205,7 +206,12 @@ function AccessOrNotFoundWrapper({
     }, [isLoadingReportData, isPolicyNotAccessible]);
 
     if (shouldShowFullScreenLoadingIndicator) {
-        return <FullscreenLoadingIndicator />;
+        const reasonAttributes: SkeletonSpanReasonAttributes = {
+            context: 'AccessOrNotFoundWrapper',
+            isLoadingReportData,
+            isPolicyEmpty: !Object.entries(policy ?? {}).length || !policy?.id,
+        };
+        return <FullscreenLoadingIndicator reasonAttributes={reasonAttributes} />;
     }
 
     if (shouldShowNotFoundPage) {

src/pages/workspace/WorkspaceJoinUserPage.tsx

@@ -56,7 +56,10 @@ function WorkspaceJoinUserPage({route}: WorkspaceJoinUserPageProps) {
 
     return (
         <ScreenWrapper testID="WorkspaceJoinUserPage">
-            <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
+            <FullScreenLoadingIndicator
+                style={[styles.flex1, styles.pRelative]}
+                reasonAttributes={{context: 'WorkspaceJoinUserPage'}}
+            />
         </ScreenWrapper>
     );
 }

src/pages/workspace/WorkspaceOverviewPlanTypePage.tsx

@@ -113,7 +113,7 @@ function WorkspaceOverviewPlanTypePage({policy}: WithPolicyProps) {
                 <HeaderWithBackButton title={translate('workspace.common.planType')} />
                 {policy?.isLoading ? (
                     <View style={styles.flex1}>
-                        <FullScreenLoadingIndicator />
+                        <FullScreenLoadingIndicator reasonAttributes={{context: 'WorkspaceOverviewPlanTypePage'}} />
                     </View>
                 ) : (
                     <>

src/pages/workspace/WorkspacePageWithSections.tsx

@@ -20,6 +20,7 @@ import {openWorkspaceView} from '@libs/actions/BankAccounts';
 import goBackFromWorkspaceSettingPages from '@libs/Navigation/helpers/goBackFromWorkspaceSettingPages';
 import Navigation from '@libs/Navigation/Navigation';
 import {isPendingDeletePolicy, isPolicyAdmin, shouldShowPolicy as shouldShowPolicyUtil} from '@libs/PolicyUtils';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Route} from '@src/ROUTES';
@@ -229,7 +230,16 @@ function WorkspacePageWithSections({
                     {headerContent}
                 </HeaderWithBackButton>
                 {!isOffline && (isLoading || firstRender.current) && shouldShowLoading && isFocused ? (
-                    <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
+                    <FullScreenLoadingIndicator
+                        style={[styles.flex1, styles.pRelative]}
+                        reasonAttributes={
+                            {
+                                context: 'WorkspacePageWithSections',
+                                isLoading,
+                                isFirstRender: firstRender.current,
+                            } satisfies SkeletonSpanReasonAttributes
+                        }
+                    />
                 ) : (
                     <>
                         {shouldUseScrollView ? (

src/pages/workspace/WorkspacesListPage.tsx

@@ -65,6 +65,7 @@ import {
 import {getDefaultWorkspaceAvatar} from '@libs/ReportUtils';
 import shouldRenderTransferOwnerButton from '@libs/shouldRenderTransferOwnerButton';
 import {isSubscriptionTypeOfInvoicing, shouldCalculateBillNewDot as shouldCalculateBillNewDotFn} from '@libs/SubscriptionUtils';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import type {AvatarSource} from '@libs/UserAvatarUtils';
 import {setNameValuePair} from '@userActions/User';
 import CONST from '@src/CONST';
@@ -742,7 +743,15 @@ function WorkspacesListPage() {
                 {shouldUseNarrowLayout && <View style={[styles.ph5, styles.pt2]}>{headerButton}</View>}
                 {shouldShowLoadingIndicator ? (
                     <View style={[styles.flex1]}>
-                        <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
+                        <FullScreenLoadingIndicator
+                            style={[styles.flex1, styles.pRelative]}
+                            reasonAttributes={
+                                {
+                                    context: 'WorkspacesListPage',
+                                    isOffline,
+                                } satisfies SkeletonSpanReasonAttributes
+                            }
+                        />
                     </View>
                 ) : (
                     <FlatList

src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomListPage.tsx

@@ -12,7 +12,7 @@ function NetSuiteImportAddCustomListPage({policy, route}: WithPolicyConnectionsP
     const isLoading = isLoadingOnyxValue(draftValuesMetadata);
 
     if (isLoading) {
-        return <FullScreenLoadingIndicator />;
+        return <FullScreenLoadingIndicator reasonAttributes={{context: 'NetSuiteImportAddCustomListPage'}} />;
     }
 
     return (

src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomSegmentPage.tsx

@@ -12,7 +12,7 @@ function NetSuiteImportAddCustomSegmentPage({policy}: WithPolicyConnectionsProps
     const isLoading = isLoadingOnyxValue(draftValuesMetadata);
 
     if (isLoading) {
-        return <FullScreenLoadingIndicator />;
+        return <FullScreenLoadingIndicator reasonAttributes={{context: 'NetSuiteImportAddCustomSegmentPage'}} />;
     }
 
     return (

src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/subPages/ConfirmCustomListStep.tsx

@@ -22,7 +22,7 @@ function ConfirmCustomListStep({onMove, netSuiteCustomFieldFormValues: values, o
     const fieldNames = [INPUT_IDS.LIST_NAME, INPUT_IDS.TRANSACTION_FIELD_ID, INPUT_IDS.MAPPING];
 
     if (!values.mapping) {
-        return <FullScreenLoadingIndicator />;
+        return <FullScreenLoadingIndicator reasonAttributes={{context: 'ConfirmCustomListStep'}} />;
     }
 
     return (

src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/subPages/ConfirmCustomSegmentList.tsx

@@ -23,7 +23,7 @@ function ConfirmCustomSegmentStep({onMove, customSegmentType, netSuiteCustomFiel
     const bottomSafeAreaPaddingStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding: true});
 
     if (!values.mapping) {
-        return <FullScreenLoadingIndicator />;
+        return <FullScreenLoadingIndicator reasonAttributes={{context: 'ConfirmCustomSegmentStep'}} />;
     }
 
     return (

src/pages/workspace/companyCards/WorkspaceCompanyCardStatementCloseDatePage.tsx

@@ -9,6 +9,7 @@ import {getCompanyCardFeed, getCompanyFeeds, getDomainOrWorkspaceAccountID, getS
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -73,7 +74,12 @@ function WorkspaceCompanyCardStatementCloseDatePage({
     }, [feed, domainOrWorkspaceAccountID]);
 
     if (isLoadingOnyxValue(cardFeedsResult) || isLoadingOnyxValue(lastSelectedFeedResult)) {
-        return <FullScreenLoadingIndicator />;
+        const reasonAttributes: SkeletonSpanReasonAttributes = {
+            context: 'WorkspaceCompanyCardStatementCloseDatePage',
+            isCardFeedsLoading: isLoadingOnyxValue(cardFeedsResult),
+            isLastSelectedFeedLoading: isLoadingOnyxValue(lastSelectedFeedResult),
+        };
+        return <FullScreenLoadingIndicator reasonAttributes={reasonAttributes} />;
     }
 
     return (

src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx

@@ -18,6 +18,7 @@ import {getCompanyCardFeed, getCompanyFeeds, getCustomOrFormattedFeedName, getDo
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import {isRequiredFulfilled} from '@libs/ValidationUtils';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import {setWorkspaceCompanyCardFeedName} from '@userActions/CompanyCards';
@@ -73,7 +74,12 @@ function WorkspaceCompanyCardsSettingsFeedNamePage({
     };
 
     if (isLoadingOnyxValue(cardFeedsResult) || isLoadingOnyxValue(lastSelectedFeedResult)) {
-        return <FullScreenLoadingIndicator />;
+        const reasonAttributes: SkeletonSpanReasonAttributes = {
+            context: 'WorkspaceCompanyCardsSettingsFeedNamePage',
+            isCardFeedsLoading: isLoadingOnyxValue(cardFeedsResult),
+            isLastSelectedFeedLoading: isLoadingOnyxValue(lastSelectedFeedResult),
+        };
+        return <FullScreenLoadingIndicator reasonAttributes={reasonAttributes} />;
     }
 
     return (

src/pages/workspace/companyCards/addNew/AddNewCardPage.tsx

@@ -12,6 +12,7 @@ import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWorkspaceAccountID from '@hooks/useWorkspaceAccountID';
 import {navigateToConciergeChat} from '@libs/actions/Report';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import Navigation from '@navigation/Navigation';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import BankConnection from '@pages/workspace/companyCards/BankConnection';
@@ -74,7 +75,13 @@ function AddNewCardPage({policy}: WithPolicyAndFullscreenLoadingProps) {
     }, [policyID]);
 
     if (isAddCardFeedLoading || isAllFeedsResultLoading || isBlockedToAddNewFeeds) {
-        return <FullScreenLoadingIndicator />;
+        const reasonAttributes: SkeletonSpanReasonAttributes = {
+            context: 'AddNewCardPage',
+            isAddCardFeedLoading,
+            isAllFeedsResultLoading,
+            isBlockedToAddNewFeeds,
+        };
+        return <FullScreenLoadingIndicator reasonAttributes={reasonAttributes} />;
     }
 
     if (isActingAsDelegate) {

src/pages/workspace/companyCards/addNew/DirectStatementCloseDatePage.tsx

@@ -7,6 +7,7 @@ import useWorkspaceAccountID from '@hooks/useWorkspaceAccountID';
 import {clearErrorField, setFeedStatementPeriodEndDay} from '@libs/actions/CompanyCards';
 import {getCompanyCardFeed, getCompanyFeeds, getDomainOrWorkspaceAccountID, getSelectedFeed} from '@libs/CardUtils';
 import Navigation from '@libs/Navigation/Navigation';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import WorkspaceCompanyCardStatementCloseDateSelectionList from '@pages/workspace/companyCards/WorkspaceCompanyCardStatementCloseDateSelectionList';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -70,7 +71,12 @@ function DirectStatementCloseDateStep({policyID}: DirectStatementCloseDateStepPr
     }, [feed, domainOrWorkspaceAccountID]);
 
     if (isLoadingOnyxValue(cardFeedsResult) || isLoadingOnyxValue(lastSelectedFeedResult)) {
-        return <FullScreenLoadingIndicator />;
+        const reasonAttributes: SkeletonSpanReasonAttributes = {
+            context: 'DirectStatementCloseDatePage',
+            isCardFeedsLoading: isLoadingOnyxValue(cardFeedsResult),
+            isLastSelectedFeedLoading: isLoadingOnyxValue(lastSelectedFeedResult),
+        };
+        return <FullScreenLoadingIndicator reasonAttributes={reasonAttributes} />;
     }
 
     return (

src/pages/workspace/downgrade/PayAndDowngradePage.tsx

@@ -70,7 +70,7 @@ function PayAndDowngradePage() {
     }, []);
 
     if (isLoadingOnyxValue(metadata)) {
-        return <FullScreenLoadingIndicator />;
+        return <FullScreenLoadingIndicator reasonAttributes={{context: 'PayAndDowngradePage'}} />;
     }
 
     return (

src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx

@@ -7,6 +7,7 @@ import {updateSelectedExpensifyCardFeed} from '@libs/actions/Card';
 import {filterInactiveCards, getCardSettings} from '@libs/CardUtils';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {WorkspaceSplitNavigatorParamList} from '@libs/Navigation/types';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import {openPolicyExpensifyCardsPage} from '@userActions/Policy/Policy';
 import CONST from '@src/CONST';
@@ -41,7 +42,17 @@ function WorkspaceExpensifyCardPage({route}: WorkspaceExpensifyCardPageProps) {
 
     const renderContent = () => {
         if (isLoading) {
-            return <FullScreenLoadingIndicator shouldUseGoBackButton />;
+            const reasonAttributes: SkeletonSpanReasonAttributes = {
+                context: 'WorkspaceExpensifyCardPage',
+                isOffline,
+                hasOnceLoaded: !!cardSettings?.hasOnceLoaded,
+            };
+            return (
+                <FullScreenLoadingIndicator
+                    shouldUseGoBackButton
+                    reasonAttributes={reasonAttributes}
+                />
+            );
         }
         if (paymentBankAccountID) {
             return (

src/pages/workspace/members/WorkspaceOwnerChangeWrapperPage.tsx

@@ -9,6 +9,7 @@ import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import shouldShowChangeWorkspaceOwnerPage from '@libs/shouldShowChangeWorkspaceOwnerPage';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import Navigation from '@navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import CardAuthenticationModal from '@pages/settings/Subscription/CardAuthenticationModal';
@@ -74,6 +75,12 @@ function WorkspaceOwnerChangeWrapperPage({route, policy, isLoadingPolicy}: Works
 
     const isLoading = isLoadingPolicy || !!policy?.isLoading;
 
+    const reasonAttributes: SkeletonSpanReasonAttributes = {
+        context: 'WorkspaceOwnerChangeWrapperPage',
+        isLoadingPolicy: !!isLoadingPolicy,
+        isPolicyLoading: !!policy?.isLoading,
+    };
+
     return (
         <AccessOrNotFoundWrapper
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
@@ -94,7 +101,7 @@ function WorkspaceOwnerChangeWrapperPage({route, policy, isLoadingPolicy}: Works
                     }}
                 />
                 <View style={[styles.containerWithSpaceBetween, error !== CONST.POLICY.OWNERSHIP_ERRORS.NO_BILLING_CARD ? styles.ph5 : styles.ph0, styles.pb0]}>
-                    {isLoading && <FullScreenLoadingIndicator />}
+                    {isLoading && <FullScreenLoadingIndicator reasonAttributes={reasonAttributes} />}
                     {shouldShowPaymentCardForm && <WorkspaceOwnerPaymentCardForm policy={policy} />}
                     {!isLoading && !shouldShowPaymentCardForm && (
                         <WorkspaceOwnerChangeCheck

src/pages/workspace/receiptPartners/WorkspaceReceiptPartnersPage.tsx

@@ -259,6 +259,7 @@ function WorkspaceReceiptPartnersPage({route}: WorkspaceReceiptPartnersPageProps
                 <FullScreenLoadingIndicator
                     shouldUseGoBackButton
                     style={styles.flex1}
+                    reasonAttributes={{context: 'WorkspaceReceiptPartnersPage'}}
                 />
             ) : (
                 <ScreenWrapper

src/pages/workspace/timeTracking/WorkspaceTimeTrackingDefaultRatePage.tsx

@@ -13,6 +13,7 @@ import {setPolicyTimeTrackingDefaultRate} from '@libs/actions/Policy/Policy';
 import {convertToFrontendAmountAsString} from '@libs/CurrencyUtils';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import {getDefaultTimeTrackingRate} from '@libs/PolicyUtils';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import {getFieldRequiredErrors} from '@libs/ValidationUtils';
 import Navigation from '@navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@navigation/types';
@@ -38,7 +39,12 @@ function WorkspaceTimeTrackingDefaultRatePage({
     const currency = policy?.outputCurrency ?? CONST.CURRENCY.USD;
 
     if (!policy || isLoadingOnyxValue(policyFetchStatus)) {
-        return <FullScreenLoadingIndicator />;
+        const reasonAttributes: SkeletonSpanReasonAttributes = {
+            context: 'WorkspaceTimeTrackingDefaultRatePage',
+            isPolicyMissing: !policy,
+            isPolicyLoading: isLoadingOnyxValue(policyFetchStatus),
+        };
+        return <FullScreenLoadingIndicator reasonAttributes={reasonAttributes} />;
     }
 
     return (

src/pages/workspace/withPolicyAndFullscreenLoading.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import useOnyx from '@hooks/useOnyx';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {PersonalDetailsList} from '@src/types/onyx';
 import type {WithPolicyOnyxProps, WithPolicyProps} from './withPolicy';
@@ -36,7 +37,12 @@ export default function withPolicyAndFullscreenLoading<TProps extends WithPolicy
         const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
 
         if ((isLoadingPolicy || isLoadingReportData) && isEmpty(policy) && isEmpty(policyDraft)) {
-            return <FullscreenLoadingIndicator />;
+            const reasonAttributes: SkeletonSpanReasonAttributes = {
+                context: 'withPolicyAndFullscreenLoading',
+                isLoadingPolicy: !!isLoadingPolicy,
+                isLoadingReportData: !!isLoadingReportData,
+            };
+            return <FullscreenLoadingIndicator reasonAttributes={reasonAttributes} />;
         }
 
         return (

src/pages/workspace/withPolicyConnections.tsx

@@ -5,6 +5,7 @@ import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
 import {openPolicyAccountingPage} from '@libs/actions/PolicyConnections';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
@@ -43,7 +44,12 @@ function withPolicyConnections<TProps extends WithPolicyConnectionsProps>(Wrappe
         }, [props.policy?.id, isConnectionDataFetchNeeded]);
 
         if ((isFetchingData || isOnyxDataLoading) && shouldBlockView) {
-            return <FullScreenLoadingIndicator />;
+            const reasonAttributes: SkeletonSpanReasonAttributes = {
+                context: 'withPolicyConnections',
+                isFetchingData,
+                isOnyxDataLoading,
+            };
+            return <FullScreenLoadingIndicator reasonAttributes={reasonAttributes} />;
         }
 
         return (

src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsCreatePage.tsx

@@ -94,7 +94,7 @@ function WorkspaceWorkflowsApprovalsCreatePage({policy, isLoadingReportData = tr
                             />
                         </>
                     )}
-                    {!approvalWorkflow && <FullScreenLoadingIndicator />}
+                    {!approvalWorkflow && <FullScreenLoadingIndicator reasonAttributes={{context: 'WorkspaceWorkflowsApprovalsCreatePage'}} />}
                 </FullPageNotFoundView>
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>

src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsEditPage.tsx

@@ -185,7 +185,7 @@ function WorkspaceWorkflowsApprovalsEditPage({policy, isLoadingReportData = true
                             />
                         </>
                     )}
-                    {!initialApprovalWorkflow && <FullScreenLoadingIndicator />}
+                    {!initialApprovalWorkflow && <FullScreenLoadingIndicator reasonAttributes={{context: 'WorkspaceWorkflowsApprovalsEditPage'}} />}
                 </FullPageNotFoundView>
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>