From 9e83b30499debecc02d11db8e29df3d01ef75731 Mon Sep 17 00:00:00 2001 From: Hubert Sosinski Date: Mon, 16 Mar 2026 10:38:01 +0100 Subject: [PATCH 1/2] Add reasonAttributes to FixCompanyCardConnection.tsx and ForYouSkeleton.tsx --- src/pages/home/ForYouSection/ForYouSkeleton.tsx | 9 +++++++-- src/pages/home/ForYouSection/index.tsx | 9 ++++++++- .../items/FixCompanyCardConnection.tsx | 8 +++++++- .../items/FixCompanyCardConnectionSkeleton.tsx | 9 +++++++-- 4 files changed, 29 insertions(+), 6 deletions(-) diff --git a/src/pages/home/ForYouSection/ForYouSkeleton.tsx b/src/pages/home/ForYouSection/ForYouSkeleton.tsx index 53a121d25354e..b9a5448d94c2d 100644 --- a/src/pages/home/ForYouSection/ForYouSkeleton.tsx +++ b/src/pages/home/ForYouSection/ForYouSkeleton.tsx @@ -5,8 +5,13 @@ import ItemListSkeletonView from '@components/Skeletons/ItemListSkeletonView'; import useContainerWidth from '@hooks/useContainerWidth'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; +import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan'; +type Props = { + reasonAttributes?: SkeletonSpanReasonAttributes; +}; + const ITEM_HEIGHT = 64; function getTitleSkeletonWidth(index: number) { @@ -22,12 +27,12 @@ function getTitleSkeletonWidth(index: number) { } } -function ForYouSkeleton() { +function ForYouSkeleton({reasonAttributes}: Props = {}) { const {onLayout, containerWidth: pageWidth} = useContainerWidth(); const styles = useThemeStyles(); const {shouldUseNarrowLayout} = useResponsiveLayout(); - useSkeletonSpan('ForYouSkeleton'); + useSkeletonSpan('ForYouSkeleton', reasonAttributes); const horizontalPadding = shouldUseNarrowLayout ? 20 : 32; const gap = 12; diff --git a/src/pages/home/ForYouSection/index.tsx b/src/pages/home/ForYouSection/index.tsx index 7272bf3e43e56..5a57e1ee9407e 100644 --- a/src/pages/home/ForYouSection/index.tsx +++ b/src/pages/home/ForYouSection/index.tsx @@ -10,6 +10,7 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; import {buildQueryStringFromFilterFormValues} from '@libs/SearchQueryUtils'; +import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; @@ -99,7 +100,13 @@ function ForYouSection() { const renderContent = () => { if (isLoadingApp || isLoadingReportData || reportCounts === undefined) { - return ; + const reasonAttributes: SkeletonSpanReasonAttributes = { + context: 'ForYouSection.ForYouSkeleton', + isLoadingApp, + isLoadingReportData, + isReportCountsUndefined: reportCounts === undefined, + }; + return ; } return hasAnyTodos ? renderTodoItems() : ; diff --git a/src/pages/home/TimeSensitiveSection/items/FixCompanyCardConnection.tsx b/src/pages/home/TimeSensitiveSection/items/FixCompanyCardConnection.tsx index 84a877d297b7f..d7a79ce97cce4 100644 --- a/src/pages/home/TimeSensitiveSection/items/FixCompanyCardConnection.tsx +++ b/src/pages/home/TimeSensitiveSection/items/FixCompanyCardConnection.tsx @@ -9,6 +9,7 @@ import {openPolicyCompanyCardsPage} from '@libs/actions/CompanyCards'; import {getCustomOrFormattedFeedName} from '@libs/CardUtils'; import Navigation from '@libs/Navigation/Navigation'; import {getMemberAccountIDsForWorkspace} from '@libs/PolicyUtils'; +import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import colors from '@styles/theme/colors'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -80,7 +81,12 @@ function FixCompanyCardConnection({card, policyID, policyName}: FixCompanyCardCo }, [cardFeeds, card.fundID]); if (!cardFeeds || cardFeeds.isLoading) { - return ; + const reasonAttributes: SkeletonSpanReasonAttributes = { + context: 'TimeSensitiveSection.FixCompanyCardConnectionSkeleton', + isCardFeedsUndefined: !cardFeeds, + isCardFeedsLoading: !!cardFeeds?.isLoading, + }; + return ; } const customFeedName = cardFeeds?.settings?.companyCardNicknames?.[card.bank as CompanyCardFeed]; diff --git a/src/pages/home/TimeSensitiveSection/items/FixCompanyCardConnectionSkeleton.tsx b/src/pages/home/TimeSensitiveSection/items/FixCompanyCardConnectionSkeleton.tsx index 1c4f9203b4715..97766c0dcb72d 100644 --- a/src/pages/home/TimeSensitiveSection/items/FixCompanyCardConnectionSkeleton.tsx +++ b/src/pages/home/TimeSensitiveSection/items/FixCompanyCardConnectionSkeleton.tsx @@ -5,16 +5,21 @@ import ItemListSkeletonView from '@components/Skeletons/ItemListSkeletonView'; import useContainerWidth from '@hooks/useContainerWidth'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; +import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan'; +type Props = { + reasonAttributes?: SkeletonSpanReasonAttributes; +}; + const ITEM_HEIGHT = 64; -function FixCompanyCardConnectionSkeleton() { +function FixCompanyCardConnectionSkeleton({reasonAttributes}: Props = {}) { const {onLayout, containerWidth: pageWidth} = useContainerWidth(); const styles = useThemeStyles(); const {shouldUseNarrowLayout} = useResponsiveLayout(); - useSkeletonSpan('FixCompanyCardConnectionSkeleton'); + useSkeletonSpan('FixCompanyCardConnectionSkeleton', reasonAttributes); const horizontalPadding = shouldUseNarrowLayout ? 20 : 32; const gap = 12; From 4a0df0feb30195dd67d0fa310f0f439d63d1886f Mon Sep 17 00:00:00 2001 From: Hubert Sosinski Date: Mon, 16 Mar 2026 11:03:20 +0100 Subject: [PATCH 2/2] Make reasonAttributes mandatory parameter --- src/components/AccountSwitcherSkeletonView/index.tsx | 2 +- src/components/ActivityIndicator.tsx | 2 +- src/components/AvatarSkeleton.tsx | 2 +- src/components/FullscreenLoadingIndicator.tsx | 2 +- src/components/LoadingIndicator.tsx | 2 +- .../MoneyReportHeaderStatusBarSkeleton.tsx | 4 ++-- .../ReportActionsListLoadingSkeleton.tsx | 4 ++-- src/components/OptionsListSkeletonView.tsx | 2 +- src/components/ReportHeaderSkeletonView.tsx | 2 +- .../DeferredSearchAutocompleteList/index.native.tsx | 2 ++ src/components/SelectionListWithSections/types.ts | 2 +- src/components/Skeletons/CardIconSkeleton.tsx | 2 +- src/components/Skeletons/CardRowSkeleton.tsx | 2 +- src/components/Skeletons/MergeExpensesSkeleton.tsx | 2 +- src/components/Skeletons/SearchFiltersSkeleton.tsx | 2 +- .../Skeletons/SearchInputSelectionSkeleton.tsx | 4 ++-- src/components/Skeletons/SearchRowSkeleton.tsx | 2 +- src/components/Skeletons/TabNavigatorSkeleton.tsx | 4 ++-- src/components/Skeletons/TableRowSkeleton.tsx | 2 +- .../Skeletons/UnreportedExpensesSkeleton.tsx | 2 +- src/components/Skeletons/WorkspaceRowSkeleton.tsx | 2 +- src/components/TransactionPreviewSkeletonView.tsx | 2 +- .../Navigation/AppNavigator/DelegatorConnectGate.tsx | 3 ++- src/libs/telemetry/useSkeletonSpan.ts | 2 +- .../AuthorizeCardTransactionPreview.tsx | 8 +++++++- .../Workspace/WorkspaceRestrictedActionPage.tsx | 8 +++++++- src/pages/home/ForYouSection/ForYouSkeleton.tsx | 4 ++-- .../items/FixCompanyCardConnectionSkeleton.tsx | 4 ++-- src/pages/inbox/sidebar/BaseSidebarScreen.tsx | 12 +++++++++++- .../components/MobileWebCameraView.tsx | 8 ++++++++ .../NetSuiteImportAddCustomListContent.tsx | 3 ++- 31 files changed, 69 insertions(+), 35 deletions(-) diff --git a/src/components/AccountSwitcherSkeletonView/index.tsx b/src/components/AccountSwitcherSkeletonView/index.tsx index 9f9c9237a20e1..a11f0259a87ce 100644 --- a/src/components/AccountSwitcherSkeletonView/index.tsx +++ b/src/components/AccountSwitcherSkeletonView/index.tsx @@ -26,7 +26,7 @@ type AccountSwitcherSkeletonViewProps = { style?: StyleProp; /** Reason attributes for skeleton span telemetry */ - reasonAttributes?: SkeletonSpanReasonAttributes; + reasonAttributes: SkeletonSpanReasonAttributes; }; function AccountSwitcherSkeletonView({shouldAnimate = true, avatarSize = CONST.AVATAR_SIZE.DEFAULT, width, style, reasonAttributes}: AccountSwitcherSkeletonViewProps) { diff --git a/src/components/ActivityIndicator.tsx b/src/components/ActivityIndicator.tsx index 8856f746a99fe..51a86c2adc521 100644 --- a/src/components/ActivityIndicator.tsx +++ b/src/components/ActivityIndicator.tsx @@ -20,7 +20,7 @@ type ActivityIndicatorProps = RNActivityIndicatorProps & { extraLoadingContext?: ExtraLoadingContext; /** Reason attributes for skeleton span telemetry */ - reasonAttributes?: SkeletonSpanReasonAttributes; + reasonAttributes: SkeletonSpanReasonAttributes; }; function ActivityIndicator({timeout = CONST.TIMING.ACTIVITY_INDICATOR_TIMEOUT, extraLoadingContext, reasonAttributes, ...rest}: ActivityIndicatorProps) { diff --git a/src/components/AvatarSkeleton.tsx b/src/components/AvatarSkeleton.tsx index e7a10ea9d6a9c..62b79d25946ee 100644 --- a/src/components/AvatarSkeleton.tsx +++ b/src/components/AvatarSkeleton.tsx @@ -10,7 +10,7 @@ import SkeletonViewContentLoader from './SkeletonViewContentLoader'; type AvatarSkeletonProps = { size?: ValueOf; - reasonAttributes?: SkeletonSpanReasonAttributes; + reasonAttributes: SkeletonSpanReasonAttributes; }; function AvatarSkeleton({size = CONST.AVATAR_SIZE.SMALL, reasonAttributes}: AvatarSkeletonProps) { diff --git a/src/components/FullscreenLoadingIndicator.tsx b/src/components/FullscreenLoadingIndicator.tsx index 6702b81628d4d..d934a797c669b 100644 --- a/src/components/FullscreenLoadingIndicator.tsx +++ b/src/components/FullscreenLoadingIndicator.tsx @@ -31,7 +31,7 @@ type FullScreenLoadingIndicatorProps = { extraLoadingContext?: ExtraLoadingContext; /** Reason attributes for skeleton span telemetry */ - reasonAttributes?: SkeletonSpanReasonAttributes; + reasonAttributes: SkeletonSpanReasonAttributes; }; function FullScreenLoadingIndicator({ diff --git a/src/components/LoadingIndicator.tsx b/src/components/LoadingIndicator.tsx index f7456d6246d5e..5879838bbfa31 100644 --- a/src/components/LoadingIndicator.tsx +++ b/src/components/LoadingIndicator.tsx @@ -27,7 +27,7 @@ function LoadingIndicator({style, iconSize, reasonAttributes}: LoadingIndicatorP diff --git a/src/components/MoneyReportHeaderStatusBarSkeleton.tsx b/src/components/MoneyReportHeaderStatusBarSkeleton.tsx index d56c8e4868fc2..d53a3669815f7 100644 --- a/src/components/MoneyReportHeaderStatusBarSkeleton.tsx +++ b/src/components/MoneyReportHeaderStatusBarSkeleton.tsx @@ -8,10 +8,10 @@ import SkeletonRect from './SkeletonRect'; import SkeletonViewContentLoader from './SkeletonViewContentLoader'; type MoneyReportHeaderStatusBarSkeletonProps = { - reasonAttributes?: SkeletonSpanReasonAttributes; + reasonAttributes: SkeletonSpanReasonAttributes; }; -function MoneyReportHeaderStatusBarSkeleton({reasonAttributes}: MoneyReportHeaderStatusBarSkeletonProps = {}) { +function MoneyReportHeaderStatusBarSkeleton({reasonAttributes}: MoneyReportHeaderStatusBarSkeletonProps) { const styles = useThemeStyles(); const theme = useTheme(); useSkeletonSpan('MoneyReportHeaderStatusBarSkeleton', reasonAttributes); diff --git a/src/components/MoneyRequestReportView/ReportActionsListLoadingSkeleton.tsx b/src/components/MoneyRequestReportView/ReportActionsListLoadingSkeleton.tsx index 389129db22eaa..1415e64d78127 100644 --- a/src/components/MoneyRequestReportView/ReportActionsListLoadingSkeleton.tsx +++ b/src/components/MoneyRequestReportView/ReportActionsListLoadingSkeleton.tsx @@ -5,10 +5,10 @@ import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan'; type ReportActionsListLoadingSkeletonProps = { - reasonAttributes?: SkeletonSpanReasonAttributes; + reasonAttributes: SkeletonSpanReasonAttributes; }; -function ReportActionsListLoadingSkeleton({reasonAttributes}: ReportActionsListLoadingSkeletonProps = {}) { +function ReportActionsListLoadingSkeleton({reasonAttributes}: ReportActionsListLoadingSkeletonProps) { useSkeletonSpan('ReportActionsListLoadingSkeleton', reasonAttributes); return ( diff --git a/src/components/OptionsListSkeletonView.tsx b/src/components/OptionsListSkeletonView.tsx index 6dc537ee239a6..fbbee98612aac 100644 --- a/src/components/OptionsListSkeletonView.tsx +++ b/src/components/OptionsListSkeletonView.tsx @@ -26,7 +26,7 @@ type OptionsListSkeletonViewProps = { shouldStyleAsTable?: boolean; fixedNumItems?: number; speed?: number; - reasonAttributes?: SkeletonSpanReasonAttributes; + reasonAttributes: SkeletonSpanReasonAttributes; onLayout?: (event: LayoutChangeEvent) => void; }; diff --git a/src/components/ReportHeaderSkeletonView.tsx b/src/components/ReportHeaderSkeletonView.tsx index ddf4b20cf73a0..4fd72ea0ab41b 100644 --- a/src/components/ReportHeaderSkeletonView.tsx +++ b/src/components/ReportHeaderSkeletonView.tsx @@ -17,7 +17,7 @@ import SkeletonViewContentLoader from './SkeletonViewContentLoader'; type ReportHeaderSkeletonViewProps = { shouldAnimate?: boolean; onBackButtonPress?: () => void; - reasonAttributes?: SkeletonSpanReasonAttributes; + reasonAttributes: SkeletonSpanReasonAttributes; }; function ReportHeaderSkeletonView({shouldAnimate = true, onBackButtonPress = () => {}, reasonAttributes}: ReportHeaderSkeletonViewProps) { diff --git a/src/components/Search/DeferredSearchAutocompleteList/index.native.tsx b/src/components/Search/DeferredSearchAutocompleteList/index.native.tsx index 1d26dd2220ac2..e0bcf80b459ce 100644 --- a/src/components/Search/DeferredSearchAutocompleteList/index.native.tsx +++ b/src/components/Search/DeferredSearchAutocompleteList/index.native.tsx @@ -3,6 +3,7 @@ import OptionsListSkeletonView from '@components/OptionsListSkeletonView'; import type {SearchAutocompleteListProps} from '@components/Search/SearchAutocompleteList'; import SearchAutocompleteList from '@components/Search/SearchAutocompleteList'; import {endSpan} from '@libs/telemetry/activeSpans'; +import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import CONST from '@src/CONST'; /** @@ -31,6 +32,7 @@ function DeferredAutocompleteList(props: SearchAutocompleteListProps) { shouldStyleAsTable onLayout={renderComponent} speed={CONST.TIMING.SKELETON_ANIMATION_SPEED} + reasonAttributes={{context: 'DeferredSearchAutocompleteList'} satisfies SkeletonSpanReasonAttributes} /> ); } diff --git a/src/components/SelectionListWithSections/types.ts b/src/components/SelectionListWithSections/types.ts index d82358af34486..565c3f5fed87a 100644 --- a/src/components/SelectionListWithSections/types.ts +++ b/src/components/SelectionListWithSections/types.ts @@ -812,7 +812,7 @@ type LoadingPlaceholderComponentProps = { shouldStyleAsTable?: boolean; fixedNumItems?: number; speed?: number; - reasonAttributes?: SkeletonSpanReasonAttributes; + reasonAttributes: SkeletonSpanReasonAttributes; }; type SectionWithIndexOffset = Section & { diff --git a/src/components/Skeletons/CardIconSkeleton.tsx b/src/components/Skeletons/CardIconSkeleton.tsx index 804b5c8d2b72b..40630c7837376 100644 --- a/src/components/Skeletons/CardIconSkeleton.tsx +++ b/src/components/Skeletons/CardIconSkeleton.tsx @@ -8,7 +8,7 @@ import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan'; type CardIconSkeletonProps = { width: number; height: number; - reasonAttributes?: SkeletonSpanReasonAttributes; + reasonAttributes: SkeletonSpanReasonAttributes; }; function CardIconSkeleton({width, height, reasonAttributes}: CardIconSkeletonProps) { diff --git a/src/components/Skeletons/CardRowSkeleton.tsx b/src/components/Skeletons/CardRowSkeleton.tsx index dac5f2c7b5dfe..f96c6d2ceda86 100644 --- a/src/components/Skeletons/CardRowSkeleton.tsx +++ b/src/components/Skeletons/CardRowSkeleton.tsx @@ -13,7 +13,7 @@ type CardRowSkeletonProps = { shouldAnimate?: boolean; fixedNumItems?: number; gradientOpacityEnabled?: boolean; - reasonAttributes?: SkeletonSpanReasonAttributes; + reasonAttributes: SkeletonSpanReasonAttributes; }; const barHeight = 7; diff --git a/src/components/Skeletons/MergeExpensesSkeleton.tsx b/src/components/Skeletons/MergeExpensesSkeleton.tsx index 0538e7ba708a1..2a1ba78f29ffd 100644 --- a/src/components/Skeletons/MergeExpensesSkeleton.tsx +++ b/src/components/Skeletons/MergeExpensesSkeleton.tsx @@ -15,7 +15,7 @@ const shortBarWidth = 40; type MergeExpensesSkeletonProps = { fixedNumItems?: number; speed?: number; - reasonAttributes?: SkeletonSpanReasonAttributes; + reasonAttributes: SkeletonSpanReasonAttributes; }; function MergeExpensesSkeleton({fixedNumItems, speed, reasonAttributes}: MergeExpensesSkeletonProps) { diff --git a/src/components/Skeletons/SearchFiltersSkeleton.tsx b/src/components/Skeletons/SearchFiltersSkeleton.tsx index caf8f04bad71f..0f723bed80868 100644 --- a/src/components/Skeletons/SearchFiltersSkeleton.tsx +++ b/src/components/Skeletons/SearchFiltersSkeleton.tsx @@ -20,7 +20,7 @@ type SearchFiltersSkeletonProps = { itemCount?: number; width?: number; height?: number; - reasonAttributes?: SkeletonSpanReasonAttributes; + reasonAttributes: SkeletonSpanReasonAttributes; }; function SearchFiltersSkeleton({shouldAnimate = true, itemCount = 5, width = 84, height = 28, reasonAttributes}: SearchFiltersSkeletonProps) { diff --git a/src/components/Skeletons/SearchInputSelectionSkeleton.tsx b/src/components/Skeletons/SearchInputSelectionSkeleton.tsx index 384c6776b05e2..ce9701727fa36 100644 --- a/src/components/Skeletons/SearchInputSelectionSkeleton.tsx +++ b/src/components/Skeletons/SearchInputSelectionSkeleton.tsx @@ -9,10 +9,10 @@ import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan'; import variables from '@styles/variables'; type SearchInputSelectionSkeletonProps = { - reasonAttributes?: SkeletonSpanReasonAttributes; + reasonAttributes: SkeletonSpanReasonAttributes; }; -function SearchInputSelectionSkeleton({reasonAttributes}: SearchInputSelectionSkeletonProps = {}) { +function SearchInputSelectionSkeleton({reasonAttributes}: SearchInputSelectionSkeletonProps) { const theme = useTheme(); const styles = useThemeStyles(); useSkeletonSpan('SearchInputSelectionSkeleton', reasonAttributes); diff --git a/src/components/Skeletons/SearchRowSkeleton.tsx b/src/components/Skeletons/SearchRowSkeleton.tsx index 0a9080b6d50d0..7c0d92e429153 100644 --- a/src/components/Skeletons/SearchRowSkeleton.tsx +++ b/src/components/Skeletons/SearchRowSkeleton.tsx @@ -17,7 +17,7 @@ type SearchRowSkeletonProps = { fixedNumItems?: number; gradientOpacityEnabled?: boolean; containerStyle?: StyleProp; - reasonAttributes?: SkeletonSpanReasonAttributes; + reasonAttributes: SkeletonSpanReasonAttributes; }; const barHeight = 8; diff --git a/src/components/Skeletons/TabNavigatorSkeleton.tsx b/src/components/Skeletons/TabNavigatorSkeleton.tsx index 3f74e4a1a25ba..a4aa38e96790d 100644 --- a/src/components/Skeletons/TabNavigatorSkeleton.tsx +++ b/src/components/Skeletons/TabNavigatorSkeleton.tsx @@ -8,10 +8,10 @@ import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan'; type TabNavigatorSkeletonProps = { - reasonAttributes?: SkeletonSpanReasonAttributes; + reasonAttributes: SkeletonSpanReasonAttributes; }; -function TabNavigatorSkeleton({reasonAttributes}: TabNavigatorSkeletonProps = {}) { +function TabNavigatorSkeleton({reasonAttributes}: TabNavigatorSkeletonProps) { const styles = useThemeStyles(); const theme = useTheme(); useSkeletonSpan('TabNavigatorSkeleton', reasonAttributes); diff --git a/src/components/Skeletons/TableRowSkeleton.tsx b/src/components/Skeletons/TableRowSkeleton.tsx index bcf1f65667c29..cc9384a104cd8 100644 --- a/src/components/Skeletons/TableRowSkeleton.tsx +++ b/src/components/Skeletons/TableRowSkeleton.tsx @@ -11,7 +11,7 @@ type TableListItemSkeletonProps = { fixedNumItems?: number; gradientOpacityEnabled?: boolean; useCompanyCardsLayout?: boolean; - reasonAttributes?: SkeletonSpanReasonAttributes; + reasonAttributes: SkeletonSpanReasonAttributes; }; const barHeight = '8'; diff --git a/src/components/Skeletons/UnreportedExpensesSkeleton.tsx b/src/components/Skeletons/UnreportedExpensesSkeleton.tsx index b0274da323de8..83ac5bfeab33a 100644 --- a/src/components/Skeletons/UnreportedExpensesSkeleton.tsx +++ b/src/components/Skeletons/UnreportedExpensesSkeleton.tsx @@ -35,7 +35,7 @@ function getExpenseAmountSkeletonWidth(index: number) { type UnreportedExpensesSkeletonProps = { fixedNumberOfItems?: number; - reasonAttributes?: SkeletonSpanReasonAttributes; + reasonAttributes: SkeletonSpanReasonAttributes; }; function UnreportedExpensesSkeleton({fixedNumberOfItems, reasonAttributes}: UnreportedExpensesSkeletonProps) { diff --git a/src/components/Skeletons/WorkspaceRowSkeleton.tsx b/src/components/Skeletons/WorkspaceRowSkeleton.tsx index 1c547216c044e..91afa7c1aa0b4 100644 --- a/src/components/Skeletons/WorkspaceRowSkeleton.tsx +++ b/src/components/Skeletons/WorkspaceRowSkeleton.tsx @@ -18,7 +18,7 @@ type WorkspaceRowSkeletonProps = { shouldAnimate?: boolean; fixedNumItems?: number; gradientOpacityEnabled?: boolean; - reasonAttributes?: SkeletonSpanReasonAttributes; + reasonAttributes: SkeletonSpanReasonAttributes; }; function WorkspaceRowSkeleton({shouldAnimate = true, fixedNumItems, gradientOpacityEnabled = false, reasonAttributes}: WorkspaceRowSkeletonProps) { diff --git a/src/components/TransactionPreviewSkeletonView.tsx b/src/components/TransactionPreviewSkeletonView.tsx index 44c4568b8ba39..c79fe9685a364 100644 --- a/src/components/TransactionPreviewSkeletonView.tsx +++ b/src/components/TransactionPreviewSkeletonView.tsx @@ -10,7 +10,7 @@ import SkeletonViewContentLoader from './SkeletonViewContentLoader'; type TransactionPreviewSkeletonViewProps = { transactionPreviewWidth: number | string; - reasonAttributes?: SkeletonSpanReasonAttributes; + reasonAttributes: SkeletonSpanReasonAttributes; }; function TransactionPreviewSkeletonView({transactionPreviewWidth, reasonAttributes}: TransactionPreviewSkeletonViewProps) { diff --git a/src/libs/Navigation/AppNavigator/DelegatorConnectGate.tsx b/src/libs/Navigation/AppNavigator/DelegatorConnectGate.tsx index 93a814d12a26f..aad96fccfb004 100644 --- a/src/libs/Navigation/AppNavigator/DelegatorConnectGate.tsx +++ b/src/libs/Navigation/AppNavigator/DelegatorConnectGate.tsx @@ -3,6 +3,7 @@ import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import useOnyx from '@hooks/useOnyx'; import {connect} from '@libs/actions/Delegate'; import getCurrentUrl from '@libs/Navigation/currentUrl'; +import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import {getSearchParamFromUrl} from '@libs/Url'; import * as App from '@userActions/App'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -58,7 +59,7 @@ function DelegatorConnectGuard({children}: {children: React.ReactNode}) { } return ( - }> + }> {children} ); diff --git a/src/libs/telemetry/useSkeletonSpan.ts b/src/libs/telemetry/useSkeletonSpan.ts index 0080a0ca49ab2..cf5904299dd26 100644 --- a/src/libs/telemetry/useSkeletonSpan.ts +++ b/src/libs/telemetry/useSkeletonSpan.ts @@ -27,7 +27,7 @@ type SkeletonSpanReasonAttributes = { * Pass the @reasonAttributes parameter to add additional context about why the skeleton is rendered. * All attributes will be namespaced with a 'skeleton.' prefix for easy querying in Sentry. */ -function useSkeletonSpan(component: string, reasonAttributes?: SkeletonSpanReasonAttributes) { +function useSkeletonSpan(component: string, reasonAttributes: SkeletonSpanReasonAttributes) { const reactId = useId(); const spanId = `${CONST.TELEMETRY.SPAN_SKELETON}_${component}_${reactId}`; diff --git a/src/pages/MultifactorAuthentication/AuthorizeTransactionPage/AuthorizeCardTransactionPreview.tsx b/src/pages/MultifactorAuthentication/AuthorizeTransactionPage/AuthorizeCardTransactionPreview.tsx index e4dfbd67a48d1..4a13a7d0abbbd 100644 --- a/src/pages/MultifactorAuthentication/AuthorizeTransactionPage/AuthorizeCardTransactionPreview.tsx +++ b/src/pages/MultifactorAuthentication/AuthorizeTransactionPage/AuthorizeCardTransactionPreview.tsx @@ -14,6 +14,7 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {convertToDisplayStringWithExplicitCurrency} from '@libs/CurrencyUtils'; import DateUtils from '@libs/DateUtils'; +import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import {formatLastFourPAN} from '@libs/TransactionPreviewUtils'; import variables from '@styles/variables'; import CONST from '@src/CONST'; @@ -45,7 +46,12 @@ function AuthorizeCardTransactionPreview({transactionID, amount, currency, merch if (shouldShowSkeleton) { return ( - + ); } diff --git a/src/pages/RestrictedAction/Workspace/WorkspaceRestrictedActionPage.tsx b/src/pages/RestrictedAction/Workspace/WorkspaceRestrictedActionPage.tsx index 4f29b0d65d038..f9b7d2f9f84a0 100644 --- a/src/pages/RestrictedAction/Workspace/WorkspaceRestrictedActionPage.tsx +++ b/src/pages/RestrictedAction/Workspace/WorkspaceRestrictedActionPage.tsx @@ -10,6 +10,7 @@ import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavig import type {RestrictedActionParamList} from '@libs/Navigation/types'; import {isPolicyAdmin, isPolicyOwner, isPolicyUser} from '@libs/PolicyUtils'; import {shouldRestrictUserBillableActions} from '@libs/SubscriptionUtils'; +import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -58,7 +59,12 @@ function WorkspaceRestrictedActionPage({ // instead of flashing the restriction UI which may no longer apply. // Skip the loading indicator when offline since the API call won't go through. if (isLoadingSubscriptionData !== false && !isOffline) { - return ; + return ( + + ); } // Workspace Owner diff --git a/src/pages/home/ForYouSection/ForYouSkeleton.tsx b/src/pages/home/ForYouSection/ForYouSkeleton.tsx index b9a5448d94c2d..d073fd8008d15 100644 --- a/src/pages/home/ForYouSection/ForYouSkeleton.tsx +++ b/src/pages/home/ForYouSection/ForYouSkeleton.tsx @@ -9,7 +9,7 @@ import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan'; type Props = { - reasonAttributes?: SkeletonSpanReasonAttributes; + reasonAttributes: SkeletonSpanReasonAttributes; }; const ITEM_HEIGHT = 64; @@ -27,7 +27,7 @@ function getTitleSkeletonWidth(index: number) { } } -function ForYouSkeleton({reasonAttributes}: Props = {}) { +function ForYouSkeleton({reasonAttributes}: Props) { const {onLayout, containerWidth: pageWidth} = useContainerWidth(); const styles = useThemeStyles(); const {shouldUseNarrowLayout} = useResponsiveLayout(); diff --git a/src/pages/home/TimeSensitiveSection/items/FixCompanyCardConnectionSkeleton.tsx b/src/pages/home/TimeSensitiveSection/items/FixCompanyCardConnectionSkeleton.tsx index 97766c0dcb72d..f8046a23ec198 100644 --- a/src/pages/home/TimeSensitiveSection/items/FixCompanyCardConnectionSkeleton.tsx +++ b/src/pages/home/TimeSensitiveSection/items/FixCompanyCardConnectionSkeleton.tsx @@ -9,12 +9,12 @@ import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan'; type Props = { - reasonAttributes?: SkeletonSpanReasonAttributes; + reasonAttributes: SkeletonSpanReasonAttributes; }; const ITEM_HEIGHT = 64; -function FixCompanyCardConnectionSkeleton({reasonAttributes}: Props = {}) { +function FixCompanyCardConnectionSkeleton({reasonAttributes}: Props) { const {onLayout, containerWidth: pageWidth} = useContainerWidth(); const styles = useThemeStyles(); const {shouldUseNarrowLayout} = useResponsiveLayout(); diff --git a/src/pages/inbox/sidebar/BaseSidebarScreen.tsx b/src/pages/inbox/sidebar/BaseSidebarScreen.tsx index eec9c3e01fdde..283ace4148365 100644 --- a/src/pages/inbox/sidebar/BaseSidebarScreen.tsx +++ b/src/pages/inbox/sidebar/BaseSidebarScreen.tsx @@ -12,6 +12,7 @@ import useOnyx from '@hooks/useOnyx'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import {isMobile} from '@libs/Browser'; +import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import ONYXKEYS from '@src/ONYXKEYS'; import SidebarLinksData from './SidebarLinksData'; @@ -58,7 +59,16 @@ function BaseSidebarScreen() { shouldDisplaySearch={shouldUseNarrowLayout} shouldDisplayHelpButton={shouldUseNarrowLayout} /> - {shouldShowSkeleton ? : } + + {shouldShowSkeleton ? ( + + ) : ( + + )} + {shouldDisplayLHB && } )} diff --git a/src/pages/iou/request/step/IOURequestStepScan/components/MobileWebCameraView.tsx b/src/pages/iou/request/step/IOURequestStepScan/components/MobileWebCameraView.tsx index e351523ddb636..c829e9d9572e7 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/components/MobileWebCameraView.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/components/MobileWebCameraView.tsx @@ -20,6 +20,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import {isMobileWebKit} from '@libs/Browser'; import {base64ToFile} from '@libs/fileDownload/FileUtils'; import {cancelSpan, endSpan, getSpan, startSpan} from '@libs/telemetry/activeSpans'; +import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import {cropImageToAspectRatio} from '@pages/iou/request/step/IOURequestStepScan/cropImageToAspectRatio'; import type {ImageObject} from '@pages/iou/request/step/IOURequestStepScan/cropImageToAspectRatio'; import useMobileReceiptScan from '@pages/iou/request/step/IOURequestStepScan/hooks/useMobileReceiptScan'; @@ -366,6 +367,13 @@ function MobileWebCameraView({ size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE} style={[styles.flex1]} color={theme.textSupporting} + reasonAttributes={ + { + context: 'MobileWebCameraView', + cameraPermissionState, + isQueriedPermissionState, + } satisfies SkeletonSpanReasonAttributes + } /> )} {cameraPermissionState !== 'granted' && isQueriedPermissionState && ( diff --git a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomListContent.tsx b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomListContent.tsx index ee552a478e703..b70c781ca7d26 100644 --- a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomListContent.tsx +++ b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomListContent.tsx @@ -9,6 +9,7 @@ import ScreenWrapper from '@components/ScreenWrapper'; import useSubPage from '@hooks/useSubPage'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import type {CustomFieldSubPageWithPolicy} from '@pages/workspace/accounting/netsuite/types'; import {updateNetSuiteCustomLists} from '@userActions/connections/NetSuiteCommands'; import {clearDraftValues} from '@userActions/FormActions'; @@ -109,7 +110,7 @@ function NetSuiteImportAddCustomListContent({policy, draftValues, policyIDParam} if (isRedirecting) { return ( - + ); }