diff --git a/src/pages/workspace/AccessOrNotFoundWrapper.tsx b/src/pages/workspace/AccessOrNotFoundWrapper.tsx index 185323a47cae..2a38f0a58292 100644 --- a/src/pages/workspace/AccessOrNotFoundWrapper.tsx +++ b/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 ; + const reasonAttributes: SkeletonSpanReasonAttributes = { + context: 'AccessOrNotFoundWrapper', + isLoadingReportData, + isPolicyEmpty: !Object.entries(policy ?? {}).length || !policy?.id, + }; + return ; } if (shouldShowNotFoundPage) { diff --git a/src/pages/workspace/WorkspaceJoinUserPage.tsx b/src/pages/workspace/WorkspaceJoinUserPage.tsx index 361887b93bea..5487ed019c07 100644 --- a/src/pages/workspace/WorkspaceJoinUserPage.tsx +++ b/src/pages/workspace/WorkspaceJoinUserPage.tsx @@ -56,7 +56,10 @@ function WorkspaceJoinUserPage({route}: WorkspaceJoinUserPageProps) { return ( - + ); } diff --git a/src/pages/workspace/WorkspaceOverviewPlanTypePage.tsx b/src/pages/workspace/WorkspaceOverviewPlanTypePage.tsx index 5c5c5224c521..4fef9a6419de 100644 --- a/src/pages/workspace/WorkspaceOverviewPlanTypePage.tsx +++ b/src/pages/workspace/WorkspaceOverviewPlanTypePage.tsx @@ -113,7 +113,7 @@ function WorkspaceOverviewPlanTypePage({policy}: WithPolicyProps) { {policy?.isLoading ? ( - + ) : ( <> diff --git a/src/pages/workspace/WorkspacePageWithSections.tsx b/src/pages/workspace/WorkspacePageWithSections.tsx index 76f4d538d57a..a848612a8e1e 100644 --- a/src/pages/workspace/WorkspacePageWithSections.tsx +++ b/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} {!isOffline && (isLoading || firstRender.current) && shouldShowLoading && isFocused ? ( - + ) : ( <> {shouldUseScrollView ? ( diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx index d90f3dbf459c..2666fca69b9e 100755 --- a/src/pages/workspace/WorkspacesListPage.tsx +++ b/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 && {headerButton}} {shouldShowLoadingIndicator ? ( - + ) : ( ; + return ; } return ( diff --git a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomSegmentPage.tsx b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomSegmentPage.tsx index e27410b36e69..317bee214b92 100644 --- a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomSegmentPage.tsx +++ b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomSegmentPage.tsx @@ -12,7 +12,7 @@ function NetSuiteImportAddCustomSegmentPage({policy}: WithPolicyConnectionsProps const isLoading = isLoadingOnyxValue(draftValuesMetadata); if (isLoading) { - return ; + return ; } return ( diff --git a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/subPages/ConfirmCustomListStep.tsx b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/subPages/ConfirmCustomListStep.tsx index 4e9070f53449..fad014d896e4 100644 --- a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/subPages/ConfirmCustomListStep.tsx +++ b/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 ; + return ; } return ( diff --git a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/subPages/ConfirmCustomSegmentList.tsx b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/subPages/ConfirmCustomSegmentList.tsx index d2b010499cf4..224625fb931f 100644 --- a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/subPages/ConfirmCustomSegmentList.tsx +++ b/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 ; + return ; } return ( diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardStatementCloseDatePage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardStatementCloseDatePage.tsx index cb3f879813ff..1f2b82456a83 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardStatementCloseDatePage.tsx +++ b/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 ; + const reasonAttributes: SkeletonSpanReasonAttributes = { + context: 'WorkspaceCompanyCardStatementCloseDatePage', + isCardFeedsLoading: isLoadingOnyxValue(cardFeedsResult), + isLastSelectedFeedLoading: isLoadingOnyxValue(lastSelectedFeedResult), + }; + return ; } return ( diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx index 9dd250d056ac..1ce1d571711c 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx +++ b/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 ; + const reasonAttributes: SkeletonSpanReasonAttributes = { + context: 'WorkspaceCompanyCardsSettingsFeedNamePage', + isCardFeedsLoading: isLoadingOnyxValue(cardFeedsResult), + isLastSelectedFeedLoading: isLoadingOnyxValue(lastSelectedFeedResult), + }; + return ; } return ( diff --git a/src/pages/workspace/companyCards/addNew/AddNewCardPage.tsx b/src/pages/workspace/companyCards/addNew/AddNewCardPage.tsx index f416414b6676..c80795a22ca4 100644 --- a/src/pages/workspace/companyCards/addNew/AddNewCardPage.tsx +++ b/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 ; + const reasonAttributes: SkeletonSpanReasonAttributes = { + context: 'AddNewCardPage', + isAddCardFeedLoading, + isAllFeedsResultLoading, + isBlockedToAddNewFeeds, + }; + return ; } if (isActingAsDelegate) { diff --git a/src/pages/workspace/companyCards/addNew/DirectStatementCloseDatePage.tsx b/src/pages/workspace/companyCards/addNew/DirectStatementCloseDatePage.tsx index 6f33c2a1bbaa..f53dfa794473 100644 --- a/src/pages/workspace/companyCards/addNew/DirectStatementCloseDatePage.tsx +++ b/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 ; + const reasonAttributes: SkeletonSpanReasonAttributes = { + context: 'DirectStatementCloseDatePage', + isCardFeedsLoading: isLoadingOnyxValue(cardFeedsResult), + isLastSelectedFeedLoading: isLoadingOnyxValue(lastSelectedFeedResult), + }; + return ; } return ( diff --git a/src/pages/workspace/downgrade/PayAndDowngradePage.tsx b/src/pages/workspace/downgrade/PayAndDowngradePage.tsx index 253f9e31fb11..8e15b0fa7781 100644 --- a/src/pages/workspace/downgrade/PayAndDowngradePage.tsx +++ b/src/pages/workspace/downgrade/PayAndDowngradePage.tsx @@ -70,7 +70,7 @@ function PayAndDowngradePage() { }, []); if (isLoadingOnyxValue(metadata)) { - return ; + return ; } return ( diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx index ece7d62148ff..c17a94f264c8 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx +++ b/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 ; + const reasonAttributes: SkeletonSpanReasonAttributes = { + context: 'WorkspaceExpensifyCardPage', + isOffline, + hasOnceLoaded: !!cardSettings?.hasOnceLoaded, + }; + return ( + + ); } if (paymentBankAccountID) { return ( diff --git a/src/pages/workspace/members/WorkspaceOwnerChangeWrapperPage.tsx b/src/pages/workspace/members/WorkspaceOwnerChangeWrapperPage.tsx index 6e32aed89608..ce16945c3229 100644 --- a/src/pages/workspace/members/WorkspaceOwnerChangeWrapperPage.tsx +++ b/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 ( - {isLoading && } + {isLoading && } {shouldShowPaymentCardForm && } {!isLoading && !shouldShowPaymentCardForm && ( ) : ( ; + const reasonAttributes: SkeletonSpanReasonAttributes = { + context: 'WorkspaceTimeTrackingDefaultRatePage', + isPolicyMissing: !policy, + isPolicyLoading: isLoadingOnyxValue(policyFetchStatus), + }; + return ; } return ( diff --git a/src/pages/workspace/withPolicyAndFullscreenLoading.tsx b/src/pages/workspace/withPolicyAndFullscreenLoading.tsx index 7400f6d27b8a..83e6399910cc 100644 --- a/src/pages/workspace/withPolicyAndFullscreenLoading.tsx +++ b/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; + const reasonAttributes: SkeletonSpanReasonAttributes = { + context: 'withPolicyAndFullscreenLoading', + isLoadingPolicy: !!isLoadingPolicy, + isLoadingReportData: !!isLoadingReportData, + }; + return ; } return ( diff --git a/src/pages/workspace/withPolicyConnections.tsx b/src/pages/workspace/withPolicyConnections.tsx index 88ee48ad5c36..8538f5c6f504 100644 --- a/src/pages/workspace/withPolicyConnections.tsx +++ b/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(Wrappe }, [props.policy?.id, isConnectionDataFetchNeeded]); if ((isFetchingData || isOnyxDataLoading) && shouldBlockView) { - return ; + const reasonAttributes: SkeletonSpanReasonAttributes = { + context: 'withPolicyConnections', + isFetchingData, + isOnyxDataLoading, + }; + return ; } return ( diff --git a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsCreatePage.tsx b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsCreatePage.tsx index 6eabda6cf034..e28c5325d259 100644 --- a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsCreatePage.tsx +++ b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsCreatePage.tsx @@ -94,7 +94,7 @@ function WorkspaceWorkflowsApprovalsCreatePage({policy, isLoadingReportData = tr /> )} - {!approvalWorkflow && } + {!approvalWorkflow && } diff --git a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsEditPage.tsx b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsEditPage.tsx index 56253bbcb896..22800a9fda2d 100644 --- a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsEditPage.tsx +++ b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsEditPage.tsx @@ -185,7 +185,7 @@ function WorkspaceWorkflowsApprovalsEditPage({policy, isLoadingReportData = true /> )} - {!initialApprovalWorkflow && } + {!initialApprovalWorkflow && }