[No QA] Make reasonAttributes mandatory

src/components/AccountSwitcherSkeletonView/index.tsx

@@ -26,7 +26,7 @@ type AccountSwitcherSkeletonViewProps = {
     style?: StyleProp<ViewStyle>;
 
     /** Reason attributes for skeleton span telemetry */
-    reasonAttributes?: SkeletonSpanReasonAttributes;
+    reasonAttributes: SkeletonSpanReasonAttributes;
 };
 
 function AccountSwitcherSkeletonView({shouldAnimate = true, avatarSize = CONST.AVATAR_SIZE.DEFAULT, width, style, reasonAttributes}: AccountSwitcherSkeletonViewProps) {

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) {

src/components/AvatarSkeleton.tsx

@@ -10,7 +10,7 @@ import SkeletonViewContentLoader from './SkeletonViewContentLoader';
 
 type AvatarSkeletonProps = {
     size?: ValueOf<typeof CONST.AVATAR_SIZE>;
-    reasonAttributes?: SkeletonSpanReasonAttributes;
+    reasonAttributes: SkeletonSpanReasonAttributes;
 };
 
 function AvatarSkeleton({size = CONST.AVATAR_SIZE.SMALL, reasonAttributes}: AvatarSkeletonProps) {

src/components/FullscreenLoadingIndicator.tsx

@@ -31,7 +31,7 @@ type FullScreenLoadingIndicatorProps = {
     extraLoadingContext?: ExtraLoadingContext;
 
     /** Reason attributes for skeleton span telemetry */
-    reasonAttributes?: SkeletonSpanReasonAttributes;
+    reasonAttributes: SkeletonSpanReasonAttributes;
 };
 
 function FullScreenLoadingIndicator({

src/components/LoadingIndicator.tsx

@@ -27,7 +27,7 @@ function LoadingIndicator({style, iconSize, reasonAttributes}: LoadingIndicatorP
             <View style={styles.w100}>
                 <ActivityIndicator
                     size={iconSize ?? CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
-                    reasonAttributes={reasonAttributes}
+                    reasonAttributes={reasonAttributes ?? {context: 'LoadingIndicator'}}
                 />
             </View>
         </View>

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);

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 (

src/components/OptionsListSkeletonView.tsx

@@ -26,7 +26,7 @@ type OptionsListSkeletonViewProps = {
     shouldStyleAsTable?: boolean;
     fixedNumItems?: number;
     speed?: number;
-    reasonAttributes?: SkeletonSpanReasonAttributes;
+    reasonAttributes: SkeletonSpanReasonAttributes;
     onLayout?: (event: LayoutChangeEvent) => void;
 };
 

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) {

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}
             />
         );
     }

src/components/SelectionListWithSections/types.ts

@@ -812,7 +812,7 @@ type LoadingPlaceholderComponentProps = {
     shouldStyleAsTable?: boolean;
     fixedNumItems?: number;
     speed?: number;
-    reasonAttributes?: SkeletonSpanReasonAttributes;
+    reasonAttributes: SkeletonSpanReasonAttributes;
 };
 
 type SectionWithIndexOffset<TItem extends ListItem> = Section<TItem> & {

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) {

src/components/Skeletons/CardRowSkeleton.tsx

@@ -13,7 +13,7 @@ type CardRowSkeletonProps = {
     shouldAnimate?: boolean;
     fixedNumItems?: number;
     gradientOpacityEnabled?: boolean;
-    reasonAttributes?: SkeletonSpanReasonAttributes;
+    reasonAttributes: SkeletonSpanReasonAttributes;
 };
 
 const barHeight = 7;

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) {

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) {

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);

src/components/Skeletons/SearchRowSkeleton.tsx

@@ -17,7 +17,7 @@ type SearchRowSkeletonProps = {
     fixedNumItems?: number;
     gradientOpacityEnabled?: boolean;
     containerStyle?: StyleProp<ViewStyle>;
-    reasonAttributes?: SkeletonSpanReasonAttributes;
+    reasonAttributes: SkeletonSpanReasonAttributes;
 };
 
 const barHeight = 8;

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);

src/components/Skeletons/TableRowSkeleton.tsx

@@ -11,7 +11,7 @@ type TableListItemSkeletonProps = {
     fixedNumItems?: number;
     gradientOpacityEnabled?: boolean;
     useCompanyCardsLayout?: boolean;
-    reasonAttributes?: SkeletonSpanReasonAttributes;
+    reasonAttributes: SkeletonSpanReasonAttributes;
 };
 
 const barHeight = '8';

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) {

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) {

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) {

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 (
-        <Suspense fallback={<FullScreenLoadingIndicator />}>
+        <Suspense fallback={<FullScreenLoadingIndicator reasonAttributes={{context: 'DelegatorConnectGate'} satisfies SkeletonSpanReasonAttributes} />}>
             <DelegatorConnectGate delegatorEmail={delegatorEmail}>{children}</DelegatorConnectGate>
         </Suspense>
     );

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}`;
 

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 (
             <View style={containerStyle}>
-                <TransactionPreviewSkeletonView transactionPreviewWidth={transactionPreviewWidth} />
+                <TransactionPreviewSkeletonView
+                    transactionPreviewWidth={transactionPreviewWidth}
+                    reasonAttributes={
+                        {context: 'AuthorizeCardTransactionPreview', isCreatedUndefined: !created, isTransactionIDUndefined: !transactionID} satisfies SkeletonSpanReasonAttributes
+                    }
+                />
             </View>
         );
     }

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 <FullScreenLoadingIndicator style={styles.opacity1} />;
+        return (
+            <FullScreenLoadingIndicator
+                style={styles.opacity1}
+                reasonAttributes={{context: 'WorkspaceRestrictedActionPage', isLoadingSubscriptionData} satisfies SkeletonSpanReasonAttributes}
+            />
+        );
     }
 
     // Workspace Owner

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;

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 <ForYouSkeleton />;
+            const reasonAttributes: SkeletonSpanReasonAttributes = {
+                context: 'ForYouSection.ForYouSkeleton',
+                isLoadingApp,
+                isLoadingReportData,
+                isReportCountsUndefined: reportCounts === undefined,
+            };
+            return <ForYouSkeleton reasonAttributes={reasonAttributes} />;
         }
 
         return hasAnyTodos ? renderTodoItems() : <EmptyState />;

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 <FixCompanyCardConnectionSkeleton />;
+        const reasonAttributes: SkeletonSpanReasonAttributes = {
+            context: 'TimeSensitiveSection.FixCompanyCardConnectionSkeleton',
+            isCardFeedsUndefined: !cardFeeds,
+            isCardFeedsLoading: !!cardFeeds?.isLoading,
+        };
+        return <FixCompanyCardConnectionSkeleton reasonAttributes={reasonAttributes} />;
     }
 
     const customFeedName = cardFeeds?.settings?.companyCardNicknames?.[card.bank as CompanyCardFeed];

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;