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