diff --git a/src/pages/settings/Subscription/CardAuthenticationModal/index.tsx b/src/pages/settings/Subscription/CardAuthenticationModal/index.tsx
index ce970745956af..df5f65ef4911d 100644
--- a/src/pages/settings/Subscription/CardAuthenticationModal/index.tsx
+++ b/src/pages/settings/Subscription/CardAuthenticationModal/index.tsx
@@ -7,6 +7,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
import useOnyx from '@hooks/useOnyx';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import useThemeStyles from '@hooks/useThemeStyles';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
import {clearPaymentCard3dsVerification, verifySetupIntent} from '@userActions/PaymentMethods';
import {verifySetupIntentAndRequestPolicyOwnerChange} from '@userActions/Policy/Policy';
import CONFIG from '@src/CONFIG';
@@ -31,6 +32,7 @@ function CardAuthenticationModal({headerTitle, policyID}: CardAuthenticationModa
const [session] = useOnyx(ONYXKEYS.SESSION);
const [isLoading, setIsLoading] = useState(true);
const [isVisible, setIsVisible] = useState(false);
+ const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'CardAuthenticationModal', isLoading};
const onModalClose = useCallback(() => {
setIsVisible(false);
@@ -90,7 +92,7 @@ function CardAuthenticationModal({headerTitle, policyID}: CardAuthenticationModa
onBackButtonPress={onModalClose}
shouldDisplayHelpButton={false}
/>
- {isLoading && }
+ {isLoading && }
;
+ const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'SubscriptionSettings', privateSubscriptionLoaded: false};
+ return ;
}
return (
diff --git a/src/pages/settings/Subscription/SubscriptionSettings/index.tsx b/src/pages/settings/Subscription/SubscriptionSettings/index.tsx
index fa7a1234b995f..7c2facb2df205 100644
--- a/src/pages/settings/Subscription/SubscriptionSettings/index.tsx
+++ b/src/pages/settings/Subscription/SubscriptionSettings/index.tsx
@@ -31,6 +31,7 @@ import {openLink} from '@libs/actions/Link';
import {convertToShortDisplayString} from '@libs/CurrencyUtils';
import {isPolicyAdmin} from '@libs/PolicyUtils';
import {getSubscriptionPrice, isSubscriptionTypeOfInvoicing} from '@libs/SubscriptionUtils';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
import Navigation from '@navigation/Navigation';
import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
import {formatSubscriptionEndDate} from '@pages/settings/Subscription/utils';
@@ -202,7 +203,8 @@ function SubscriptionSettings() {
}
if (!privateSubscription) {
- return ;
+ const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'SubscriptionSettings', privateSubscriptionLoaded: false};
+ return ;
}
return (
diff --git a/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx b/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx
index 76ee9b594c751..7c2891ff93639 100644
--- a/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx
+++ b/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx
@@ -14,6 +14,7 @@ import {openSubscriptionPage} from '@libs/actions/Subscription';
import Navigation from '@libs/Navigation/Navigation';
import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
import type {SettingsSplitNavigatorParamList} from '@libs/Navigation/types';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
import ONYXKEYS from '@src/ONYXKEYS';
import SCREENS from '@src/SCREENS';
import CardSection from './CardSection/CardSection';
@@ -43,7 +44,8 @@ function SubscriptionSettingsPage({route}: SubscriptionSettingsPageProps) {
}, [isAppLoading, shouldShowPage]);
if (!shouldShowPage && isAppLoading) {
- return ;
+ const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'SubscriptionSettingsPage', isAppLoading: !!isAppLoading, shouldShowPage};
+ return ;
}
if (!shouldShowPage) {
diff --git a/src/pages/settings/Subscription/SubscriptionSize/index.tsx b/src/pages/settings/Subscription/SubscriptionSize/index.tsx
index 3e2768ff78fc7..a17784aa54ff4 100644
--- a/src/pages/settings/Subscription/SubscriptionSize/index.tsx
+++ b/src/pages/settings/Subscription/SubscriptionSize/index.tsx
@@ -10,6 +10,7 @@ import useSubPage from '@hooks/useSubPage';
import {clearDraftValues} from '@libs/actions/FormActions';
import Navigation from '@libs/Navigation/Navigation';
import {isSubscriptionTypeOfInvoicing} from '@libs/SubscriptionUtils';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
import {updateSubscriptionSize} from '@userActions/Subscription';
import CONST from '@src/CONST';
@@ -61,7 +62,8 @@ function SubscriptionSizePage() {
}
if (!privateSubscription) {
- return ;
+ const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'SubscriptionSize', privateSubscriptionLoaded: false};
+ return ;
}
return (
diff --git a/src/pages/settings/Wallet/ChooseTransferAccountPage.tsx b/src/pages/settings/Wallet/ChooseTransferAccountPage.tsx
index cb1e3857eb41d..d69ebade16b1f 100644
--- a/src/pages/settings/Wallet/ChooseTransferAccountPage.tsx
+++ b/src/pages/settings/Wallet/ChooseTransferAccountPage.tsx
@@ -15,6 +15,7 @@ import useOnyx from '@hooks/useOnyx';
import useThemeStyles from '@hooks/useThemeStyles';
import {getLastFourDigits} from '@libs/BankAccountUtils';
import Navigation from '@libs/Navigation/Navigation';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
import {openPersonalBankAccountSetupView} from '@userActions/BankAccounts';
import {saveWalletTransferAccountTypeAndID} from '@userActions/PaymentMethods';
import CONST from '@src/CONST';
@@ -96,7 +97,8 @@ function ChooseTransferAccountPage() {
}, [bankAccountOptions, selectedAccountID]);
if (isLoadingOnyxValue(walletTransferResult)) {
- return ;
+ const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'ChooseTransferAccountPage', walletTransferLoaded: false};
+ return ;
}
return (
diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx
index 63153426f5594..4c3bad344d427 100644
--- a/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx
+++ b/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx
@@ -13,6 +13,7 @@ import {isFullScreenName} from '@libs/Navigation/helpers/isNavigatorName';
import Navigation from '@libs/Navigation/Navigation';
import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types';
import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
import CONST from '@src/CONST';
import NAVIGATORS from '@src/NAVIGATORS';
import ONYXKEYS from '@src/ONYXKEYS';
@@ -166,7 +167,9 @@ function InternationalDepositAccountContent({
shouldShowOfflineIndicatorInWideScreen={pageIndex === CONST.CORPAY_FIELDS.INDEXES.MAPPING.CONFIRMATION}
>
{isRedirecting || isAccountLoading ? (
-
+
) : (
<>
;
+ const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'InternationalDepositAccount', isLoading};
+ return ;
}
return (
diff --git a/src/pages/settings/Wallet/WalletPage/index.tsx b/src/pages/settings/Wallet/WalletPage/index.tsx
index 0836d88bac9e0..423c6eb425016 100644
--- a/src/pages/settings/Wallet/WalletPage/index.tsx
+++ b/src/pages/settings/Wallet/WalletPage/index.tsx
@@ -602,6 +602,7 @@ function WalletPage() {
}, [bottomMountItem, confirmDeleteCard, isBetaEnabled, icons.MoneySearch, icons.Table, icons.Trashcan, paymentMethod.methodID, selectedCard?.bank, shouldUseNarrowLayout, translate]);
if (isLoadingApp) {
+ const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'WalletPage', isLoadingApp: !!isLoadingApp};
return (
{headerWithBackButton}
-
+
);