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 && }