diff --git a/contributingGuides/LOADING_STATE.md b/contributingGuides/LOADING_STATE.md index 8ed2b4473ed0..ff3cded22543 100644 --- a/contributingGuides/LOADING_STATE.md +++ b/contributingGuides/LOADING_STATE.md @@ -57,9 +57,7 @@ const shouldShowLoadingIndicator = isAppLoadPending && !isOffline; // ... {shouldShowLoadingIndicator ? ( - + ) : ( )} @@ -172,5 +170,3 @@ Keep `HAS_LOADED_APP` and the cold-restart fallback. The queue hook is the prima Report skeleton consumers use `useIsReportLoadPending(reportID)` wherever pending `OpenReport` work is part of the loading decision. They keep existing readiness checks, including `hasOnceLoadedReportActions`, report data completeness, and offline behavior. A stranded `isLoadingInitialReportActions` value without a matching queue request or in-memory latch must not show a skeleton. Do not remove the legacy fields as part of this migration. `IS_LOADING_APP` and report loading state still support recovery, report positioning, navigation guards, and the deferred-flush bridge. Skeleton consumers should use the public hooks. Full flag deletion is outside this plan. - -**Keep telemetry for a terminal request that still shows a skeleton.** `useSkeletonSpan` in `src/libs/telemetry/useSkeletonSpan.ts` and the `reasonAttributes` prop on `ActivityIndicator` record a span while a skeleton is mounted. They flag skeletons that remain past `CONST.TELEMETRY.CONFIG.SKELETON_MIN_DURATION`. Pass `SkeletonSpanReasonAttributes` with a `context` for the screen and any state that explains the render, such as `isOffline`. This makes the case queryable under the `skeleton.` namespace. diff --git a/contributingGuides/OBSERVABILITY.md b/contributingGuides/OBSERVABILITY.md index 07f6b7f1d2bb..9bcaca413aab 100644 --- a/contributingGuides/OBSERVABILITY.md +++ b/contributingGuides/OBSERVABILITY.md @@ -37,17 +37,6 @@ Minimum set of parameters required to create a span: **Span configuration**: Set of parameters passed to `Sentry.startInteractiveSpan`. See the [Sentry docs](https://docs.sentry.io/platforms/react-native/tracing/instrumentation/custom-instrumentation/#starting-inactive-spans-startinactivespan) for more details. -Additional parameters can be added as a config object (third parameter): - -**Minimum Duration**: what's the minimum duration of a span. Spans shorter than this duration are discarded. - -```typescript -startSpan(CONST.TELEMETRY.SPAN_SKELETON, { - name: CONST.TELEMETRY.SPAN_SKELETON, - op: CONST.TELEMETRY.SPAN_SKELETON, -}, {minDuration: CONST.TELEMETRY.CONFIG.SKELETON_MIN_DURATION}); -``` - #### Finishing a Span There are two ways to finish a span: @@ -72,7 +61,7 @@ Defined in `src/CONST/index.ts` under `CONST.TELEMETRY`: - Span names: `SPAN_OPEN_REPORT`, `SPAN_SEND_MESSAGE` - Tag names: `TAGS.ACTIVE_POLICY`, `TAGS.AUTHENTICATION_ERROR_TYPE` - Attribute names: `ATTRIBUTE_REPORT_ID`, `ATTRIBUTE_MESSAGE_LENGTH` -- Configuration: `CONFIG.SKELETON_MIN_DURATION` +- Configuration: `CONFIG.MEMORY_TRACKING_INTERVAL` #### Naming Conventions @@ -86,7 +75,7 @@ Defined in `src/CONST/index.ts` under `CONST.TELEMETRY`: ### Middleware Process events before sending to Sentry: -- **minDurationFilter** - Discards spans shorter than a specified duration +- **maxDurationFilter** - Discards spans longer than a specified duration - **scopeTagsEnricher** - Adds cohort and policy tags - **emailDomainFilter** - Removes accounts we don't want to send telemetry for @@ -115,7 +104,6 @@ Error conditions tracked for trend analysis: - **ANRs**: number of "Application Not Responding" errors - **404 pages**: number of user actions other than deep links that result in 404 -- **Infinite skeletons**: Skeleton visible 10+ seconds - **Authentication failures**: number of authentication errors other than wrong credentials ### Feature Health diff --git a/contributingGuides/OBSERVABILITY_METRICS.md b/contributingGuides/OBSERVABILITY_METRICS.md index 858a5988f675..2e41bc476065 100644 --- a/contributingGuides/OBSERVABILITY_METRICS.md +++ b/contributingGuides/OBSERVABILITY_METRICS.md @@ -172,17 +172,6 @@ This document lists all implemented telemetry metrics in the Expensify App. **End**: Immediately after start (tracking occurrence, not duration) ([`src/libs/telemetry/useAbsentPageSpan.ts`](https://github.com/Expensify/App/blob/8f123f449f1a4533830b18a1040c9a5f1949821d/src/libs/telemetry/useAbsentPageSpan.ts#L39)) **Attributes**: `url`, `navigationSource: 'deeplink' | 'button'` -### Infinite Skeletons - -**Constant**: `CONST.TELEMETRY.SPAN_SKELETON` -**Sentry Name**: `ManualSkeleton` -**Threshold**: 10s minimum duration (only sent if visible 10+ seconds) -**What's Measured**: Number of skeleton components visible longer than expected -**Start**: Skeleton component mounted ([`src/libs/telemetry/useSkeletonSpan.ts`](https://github.com/Expensify/App/blob/8f123f449f1a4533830b18a1040c9a5f1949821d/src/libs/telemetry/useSkeletonSpan.ts#L13)) -**End**: Component unmounts ([`src/libs/telemetry/useSkeletonSpan.ts`](https://github.com/Expensify/App/blob/8f123f449f1a4533830b18a1040c9a5f1949821d/src/libs/telemetry/useSkeletonSpan.ts#L24)) -**Span ID**: `${CONST.TELEMETRY.SPAN_SKELETON}_${component}_${reactId}` -**Minimum Duration**: `CONST.TELEMETRY.CONFIG.SKELETON_MIN_DURATION` (10s) - ### Authentication Failures **Constants**: `CONST.TELEMETRY.TAGS.AUTHENTICATION_FUNCTION`, `CONST.TELEMETRY.TAGS.AUTHENTICATION_ERROR_TYPE`, `CONST.TELEMETRY.TAGS.AUTHENTICATION_JSON_CODE` ([`src/CONST/index.ts`](https://github.com/Expensify/App/blob/8f123f449f1a4533830b18a1040c9a5f1949821d/src/CONST/index.ts#L1700-L1702)) diff --git a/src/CONST/index.ts b/src/CONST/index.ts index 0b544b1494dc..842c6553fb43 100644 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -2211,7 +2211,6 @@ const CONST = { SPAN_GEOLOCATION_WAIT: 'ManualGeolocationWait', SPAN_SEND_MESSAGE: 'ManualSendMessage', SPAN_NOT_FOUND_PAGE: 'ManualNotFoundPage', - SPAN_SKELETON: 'ManualSkeleton', SPAN_ODOMETER_TO_CONFIRMATION: 'ManualOdometerToConfirmation', SPAN_ODOMETER_IMAGE_STITCH: 'ManualOdometerImageStitch', SPAN_ODOMETER_IMAGE_CAPTURE: 'ManualOdometerImageCapture', @@ -2255,7 +2254,6 @@ const CONST = { ATTRIBUTE_CANCELED_BY_SKELETON: 'canceled_by_skeleton', ATTRIBUTE_ROUTE_FROM: 'route_from', ATTRIBUTE_ROUTE_TO: 'route_to', - ATTRIBUTE_MIN_DURATION: 'min_duration', ATTRIBUTE_FINISHED_MANUALLY: 'finished_manually', ATTRIBUTE_IS_WARM: 'is_warm', ATTRIBUTE_LAZY_TAB_FALLBACK_SHOWN: 'lazy_tab_fallback_shown', @@ -2266,7 +2264,6 @@ const CONST = { // report list, so durations that include the openApp wait can be excluded from render measurements. ATTRIBUTE_SKELETON_SHOWN: 'skeleton_shown', ATTRIBUTE_WAS_LIST_EMPTY: 'was_list_empty', - ATTRIBUTE_SKELETON_PREFIX: 'skeleton.', ATTRIBUTE_SCENARIO: 'scenario', // Start type stamped on the navigate-to-reports spans: cold, warm_first, or warm_subsequent. ATTRIBUTE_START_TYPE: 'start_type', @@ -2381,10 +2378,7 @@ const CONST = { WARM_SUBSEQUENT: 'warm_subsequent', UNKNOWN: 'unknown', }, - // Event names - EVENT_SKELETON_ATTRIBUTES_UPDATE: 'skeleton_attributes_updated', CONFIG: { - SKELETON_MIN_DURATION: 10_000, MEMORY_TRACKING_INTERVAL: 2 * 60 * 1000, // Web Memory Thresholds (% of jsHeapSizeLimit) diff --git a/src/components/AccountSwitcherSkeletonView/index.tsx b/src/components/AccountSwitcherSkeletonView/index.tsx index 7446b542968a..30cfefb15cf5 100644 --- a/src/components/AccountSwitcherSkeletonView/index.tsx +++ b/src/components/AccountSwitcherSkeletonView/index.tsx @@ -5,9 +5,6 @@ import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; -import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan'; - import CONST from '@src/CONST'; import type {StyleProp, ViewStyle} from 'react-native'; @@ -29,16 +26,12 @@ type AccountSwitcherSkeletonViewProps = { /** Additional styles for the skeleton view */ style?: StyleProp; - - /** Reason attributes for skeleton span telemetry */ - reasonAttributes: SkeletonSpanReasonAttributes; }; -function AccountSwitcherSkeletonView({shouldAnimate = true, avatarSize = CONST.AVATAR_SIZE.DEFAULT, width, style, reasonAttributes}: AccountSwitcherSkeletonViewProps) { +function AccountSwitcherSkeletonView({shouldAnimate = true, avatarSize = CONST.AVATAR_SIZE.DEFAULT, width, style}: AccountSwitcherSkeletonViewProps) { const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); - useSkeletonSpan('AccountSwitcherSkeletonView', reasonAttributes); const avatarPlaceholderSize = StyleUtils.getAvatarSize(avatarSize); const avatarPlaceholderRadius = avatarPlaceholderSize / 2; const startPositionX = avatarPlaceholderRadius; diff --git a/src/components/ActivityIndicator.tsx b/src/components/ActivityIndicator.tsx index c929d71f930c..fa2f8b2e556a 100644 --- a/src/components/ActivityIndicator.tsx +++ b/src/components/ActivityIndicator.tsx @@ -2,8 +2,6 @@ import useTheme from '@hooks/useTheme'; import logAppStateOnLongLoading from '@libs/AppState'; import type {ExtraLoadingContext} from '@libs/AppState'; -import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; -import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan'; import CONST from '@src/CONST'; @@ -22,14 +20,10 @@ type ActivityIndicatorProps = RNActivityIndicatorProps & { /** Extra loading context to be passed to the logAppStateOnLongLoading function */ extraLoadingContext?: ExtraLoadingContext; - - /** Reason attributes for skeleton span telemetry */ - reasonAttributes: SkeletonSpanReasonAttributes; }; -function ActivityIndicator({timeout = CONST.TIMING.ACTIVITY_INDICATOR_TIMEOUT, extraLoadingContext, reasonAttributes, ...rest}: ActivityIndicatorProps) { +function ActivityIndicator({timeout = CONST.TIMING.ACTIVITY_INDICATOR_TIMEOUT, extraLoadingContext, ...rest}: ActivityIndicatorProps) { const theme = useTheme(); - useSkeletonSpan('ActivityIndicator', reasonAttributes); useEffect(() => { const timeoutId = setTimeout(() => { diff --git a/src/components/AddPlaidBankAccount.tsx b/src/components/AddPlaidBankAccount.tsx index 2e22ec96400d..e6f018984e46 100644 --- a/src/components/AddPlaidBankAccount.tsx +++ b/src/components/AddPlaidBankAccount.tsx @@ -7,7 +7,6 @@ import useThemeStyles from '@hooks/useThemeStyles'; import {handlePlaidError, openPlaidBankAccountSelector, openPlaidBankLogin, setPlaidEvent} from '@libs/actions/BankAccounts'; import KeyboardShortcut from '@libs/KeyboardShortcut'; import Log from '@libs/Log'; -import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import {handleRestrictedEvent} from '@userActions/App'; @@ -249,13 +248,9 @@ function AddPlaidBankAccount({ } if (plaidData?.isLoading) { - const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'AddPlaidBankAccount', isLoading: !!plaidData.isLoading}; return ( - + ); } diff --git a/src/components/AddToWalletButton/index.native.tsx b/src/components/AddToWalletButton/index.native.tsx index f059397e1af1..42787cae9dbb 100644 --- a/src/components/AddToWalletButton/index.native.tsx +++ b/src/components/AddToWalletButton/index.native.tsx @@ -8,7 +8,6 @@ import useThemeStyles from '@hooks/useThemeStyles'; import {getPaymentMethods} from '@libs/actions/PaymentMethods'; import getPlatform from '@libs/getPlatform'; import Log from '@libs/Log'; -import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import {checkIfWalletIsAvailable, handleAddCardToWallet, isCardInWallet} from '@libs/Wallet/index'; import CONST from '@src/CONST'; @@ -98,13 +97,7 @@ function AddToWalletButton({card, cardHolderName, cardDescription, style}: AddTo } if (isLoading) { - const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'AddToWalletButton', isLoading}; - return ( - - ); + return ; } if (isInWallet) { diff --git a/src/components/AddressSearch/index.tsx b/src/components/AddressSearch/index.tsx index c979a29cc672..f8c80d144db4 100644 --- a/src/components/AddressSearch/index.tsx +++ b/src/components/AddressSearch/index.tsx @@ -16,7 +16,6 @@ import {getCommandURL} from '@libs/ApiUtils'; import getCurrentPosition from '@libs/getCurrentPosition'; import type {GeolocationErrorCodeType} from '@libs/getCurrentPosition/getCurrentPosition.types'; import {getAddressComponents, getPlaceAutocompleteTerms} from '@libs/GooglePlacesUtils'; -import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import variables from '@styles/variables'; @@ -81,7 +80,6 @@ function AddressSearchListEmptyComponent({searchValue, onEmptyChange}: {searchVa function AddressSearchListLoader({onLoadingChange}: {onLoadingChange: (isLoading: boolean) => void}) { const styles = useThemeStyles(); - const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'AddressSearch.listLoader'}; useEffect(() => { onLoadingChange(true); @@ -90,7 +88,7 @@ function AddressSearchListLoader({onLoadingChange}: {onLoadingChange: (isLoading return ( - + ); } @@ -392,11 +390,6 @@ function AddressSearch({ const listLoader = useMemo(() => , []); - const fetchingLocationReasonAttributes: SkeletonSpanReasonAttributes = { - context: 'AddressSearch.isFetchingCurrentLocation', - isFetchingCurrentLocation, - }; - return ( /* * The GooglePlacesAutocomplete component uses a VirtualizedList internally, @@ -538,10 +531,7 @@ function AddressSearch({ {isFetchingCurrentLocation && ( - + )} diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx index 40ab3cf1a64c..427f2328a319 100644 --- a/src/components/Attachments/AttachmentCarousel/index.tsx +++ b/src/components/Attachments/AttachmentCarousel/index.tsx @@ -108,10 +108,7 @@ function AttachmentCarousel({ if (page == null) { return ( - + ); } diff --git a/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx index eaf8a9222088..4ad5ad9c01b7 100644 --- a/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx @@ -8,8 +8,6 @@ import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; - import type IconAsset from '@src/types/utils/IconAsset'; import type {StyleProp, ViewStyle} from 'react-native'; @@ -44,11 +42,6 @@ function DefaultAttachmentView({fileName = '', shouldShowLoadingSpinnerIcon = fa const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); - const reasonAttributes: SkeletonSpanReasonAttributes = { - context: 'DefaultAttachmentView', - shouldShowLoadingSpinnerIcon, - isUploading, - }; return ( @@ -76,7 +69,6 @@ function DefaultAttachmentView({fileName = '', shouldShowLoadingSpinnerIcon = fa diff --git a/src/components/AvatarCropModal/AvatarCropView.tsx b/src/components/AvatarCropModal/AvatarCropView.tsx index 2d3a21170a6d..94c1c33b49b7 100644 --- a/src/components/AvatarCropModal/AvatarCropView.tsx +++ b/src/components/AvatarCropModal/AvatarCropView.tsx @@ -16,7 +16,6 @@ import useThemeStyles from '@hooks/useThemeStyles'; import cropOrRotateImage from '@libs/cropOrRotateImage'; import type {CustomRNImageManipulatorResult} from '@libs/cropOrRotateImage/types'; -import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import CONST from '@src/CONST'; import type IconAsset from '@src/types/utils/IconAsset'; @@ -24,7 +23,7 @@ import type IconAsset from '@src/types/utils/IconAsset'; import type {LayoutChangeEvent} from 'react-native'; import type {GestureUpdateEvent, PanGestureChangeEventPayload, PanGestureHandlerEventPayload} from 'react-native-gesture-handler'; -import React, {useCallback, useEffect, useMemo, useState} from 'react'; +import React, {useCallback, useEffect, useState} from 'react'; import {View} from 'react-native'; import {Gesture, GestureHandlerRootView} from 'react-native-gesture-handler'; import ImageSize from 'react-native-image-size'; @@ -333,15 +332,6 @@ function AvatarCropView({imageUri = '', imageName = '', imageType = '', onClose, updateImageOffset(newX, newY); }; - const reasonAttributes = useMemo( - () => ({ - context: 'AvatarCropModal', - isImageInitialized, - isImageContainerInitialized, - }), - [isImageInitialized, isImageContainerInitialized], - ); - return ( ) : ( <> diff --git a/src/components/AvatarSkeleton.tsx b/src/components/AvatarSkeleton.tsx index 75416dad0efd..34f9e3e16f49 100644 --- a/src/components/AvatarSkeleton.tsx +++ b/src/components/AvatarSkeleton.tsx @@ -1,9 +1,6 @@ import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; -import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; -import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan'; - import CONST from '@src/CONST'; import type {ValueOf} from 'type-fest'; @@ -15,12 +12,10 @@ import SkeletonViewContentLoader from './SkeletonViewContentLoader'; type AvatarSkeletonProps = { size?: ValueOf; - reasonAttributes: SkeletonSpanReasonAttributes; }; -function AvatarSkeleton({size = CONST.AVATAR_SIZE.SMALL, reasonAttributes}: AvatarSkeletonProps) { +function AvatarSkeleton({size = CONST.AVATAR_SIZE.SMALL}: AvatarSkeletonProps) { const theme = useTheme(); - useSkeletonSpan('AvatarSkeleton', reasonAttributes); const StyleUtils = useStyleUtils(); const avatarSize = StyleUtils.getAvatarSize(size); const skeletonCircleRadius = avatarSize / 2; diff --git a/src/components/AvatarWithIndicator.tsx b/src/components/AvatarWithIndicator.tsx index 1b507f35b60b..151156e8e983 100644 --- a/src/components/AvatarWithIndicator.tsx +++ b/src/components/AvatarWithIndicator.tsx @@ -39,7 +39,7 @@ function AvatarWithIndicator({source, accountID, tooltipText = '', fallbackIcon, {isLoading ? ( - + ) : ( <> { if ('children' in rest) { return rest.children; @@ -555,7 +550,6 @@ function Button({ color={loadingIndicatorColor} style={[styles.pAbsolute, styles.l0, styles.r0]} size={extraSmall ? 12 : undefined} - reasonAttributes={buttonLoadingReasonAttributes} /> )} diff --git a/src/components/ButtonComposed/Button.tsx b/src/components/ButtonComposed/Button.tsx index e5d8ee97d8e0..5365f18c45f0 100644 --- a/src/components/ButtonComposed/Button.tsx +++ b/src/components/ButtonComposed/Button.tsx @@ -8,7 +8,6 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import HapticFeedback from '@libs/HapticFeedback'; -import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import CONST from '@src/CONST'; @@ -58,9 +57,6 @@ function Button({ const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const [isHovered, setIsHovered] = useState(false); - const buttonLoadingReasonAttributes: SkeletonSpanReasonAttributes = { - context: 'Button', - }; const contextValue = useMemo( () => ({ @@ -221,7 +217,6 @@ function Button({ )} diff --git a/src/components/Charts/BarChart/BarChartContent.tsx b/src/components/Charts/BarChart/BarChartContent.tsx index 36b8451539ee..58ea85e105a8 100644 --- a/src/components/Charts/BarChart/BarChartContent.tsx +++ b/src/components/Charts/BarChart/BarChartContent.tsx @@ -20,8 +20,6 @@ import VictoryTheme, {CHART_CONTENT_MIN_HEIGHT, GLYPH_PADDING} from '@components import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; - import variables from '@styles/variables'; import type {LayoutChangeEvent} from 'react-native'; @@ -236,13 +234,9 @@ function BarChartContentBody({data, isLoading, yAxisUnit, yAxisUnitPosition = 'l const chartPadding = {...VictoryTheme.axis.padding, bottom: labelSpace + VictoryTheme.axis.padding.bottom, left: yAxisLabelWidth + GLYPH_PADDING}; if (isLoading || !fontManager) { - const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'BarChartContent', isLoading, isFontLoading: !fontManager}; return ( - + ); } diff --git a/src/components/Charts/BarChart/index.tsx b/src/components/Charts/BarChart/index.tsx index 38f2ac4290ff..1a7d477d6588 100644 --- a/src/components/Charts/BarChart/index.tsx +++ b/src/components/Charts/BarChart/index.tsx @@ -10,7 +10,6 @@ function BarChart(props: BarChartProps) { ); } diff --git a/src/components/Charts/LineChart/LineChartContent.tsx b/src/components/Charts/LineChart/LineChartContent.tsx index 2f085da577cd..131a831f7b75 100644 --- a/src/components/Charts/LineChart/LineChartContent.tsx +++ b/src/components/Charts/LineChart/LineChartContent.tsx @@ -22,8 +22,6 @@ import VictoryTheme, {CHART_CONTENT_MIN_HEIGHT, GLYPH_PADDING, LABEL_PADDING, LA import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; - import variables from '@styles/variables'; import type {LayoutChangeEvent} from 'react-native'; @@ -234,13 +232,9 @@ function LineChartContentBody({data, isLoading, yAxisUnit, yAxisUnitPosition = ' }; if (isLoading || !fontManager) { - const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'LineChartContent', isLoading, isFontLoading: !fontManager}; return ( - + ); } diff --git a/src/components/Charts/LineChart/index.tsx b/src/components/Charts/LineChart/index.tsx index 61744339fe96..7de73f7fcf44 100644 --- a/src/components/Charts/LineChart/index.tsx +++ b/src/components/Charts/LineChart/index.tsx @@ -10,7 +10,6 @@ function LineChart(props: LineChartProps) { ); } diff --git a/src/components/Charts/PieChart/PieChartContent.tsx b/src/components/Charts/PieChart/PieChartContent.tsx index 30347edab3fb..33ea00f34383 100644 --- a/src/components/Charts/PieChart/PieChartContent.tsx +++ b/src/components/Charts/PieChart/PieChartContent.tsx @@ -9,8 +9,6 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; - import type {LayoutChangeEvent} from 'react-native'; import React, {useState} from 'react'; @@ -153,13 +151,9 @@ function PieChartContent({data, isLoading, valueUnit, valueUnitPosition, onSlice }; if (isLoading) { - const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'PieChartContent', isLoading}; return ( - + ); } diff --git a/src/components/Charts/PieChart/index.tsx b/src/components/Charts/PieChart/index.tsx index 933872947776..66999fee714f 100644 --- a/src/components/Charts/PieChart/index.tsx +++ b/src/components/Charts/PieChart/index.tsx @@ -11,7 +11,6 @@ function PieChart(props: PieChartProps) { ); } diff --git a/src/components/Charts/SkiaWebChart/index.tsx b/src/components/Charts/SkiaWebChart/index.tsx index f064476f6c2c..15cf29d06531 100644 --- a/src/components/Charts/SkiaWebChart/index.tsx +++ b/src/components/Charts/SkiaWebChart/index.tsx @@ -6,8 +6,6 @@ import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; - import variables from '@styles/variables'; import type {ComponentType} from 'react'; @@ -26,7 +24,6 @@ type SkiaWebChartProps = { componentProps: TProps; /** Identifies the loading skeleton span for telemetry. */ - reasonContext: string; }; function ChartUnavailable() { @@ -55,7 +52,7 @@ function ChartUnavailable() { // `object` mirrors WithSkiaWeb's own constraint; `Record` would reject the // interface-based render-html renderer props (VictoryChartRendererProps) that lack an index signature. // eslint-disable-next-line @typescript-eslint/no-restricted-types -function SkiaWebChart({getComponent, componentProps, reasonContext}: SkiaWebChartProps) { +function SkiaWebChart({getComponent, componentProps}: SkiaWebChartProps) { const styles = useThemeStyles(); // Probe once per mount (not per render) so re-rendering doesn't repeatedly create WebGL contexts, @@ -67,13 +64,9 @@ function SkiaWebChart({getComponent, componentProps, reas return ; } - const reasonAttributes: SkeletonSpanReasonAttributes = {context: reasonContext}; const fallback = ( - + ); diff --git a/src/components/ConfirmContent.tsx b/src/components/ConfirmContent.tsx index c658a997cf73..f64c36a289ac 100644 --- a/src/components/ConfirmContent.tsx +++ b/src/components/ConfirmContent.tsx @@ -219,12 +219,7 @@ function ConfirmContent({ title={title} textStyles={titleStyles} /> - {isTitleLoading && ( - - )} + {isTitleLoading && } {shouldEnablePromptScroll ? {promptContent} : promptContent} diff --git a/src/components/ConnectToHRFlow/index.ios.tsx b/src/components/ConnectToHRFlow/index.ios.tsx index 5670ad149a14..195d270caa92 100644 --- a/src/components/ConnectToHRFlow/index.ios.tsx +++ b/src/components/ConnectToHRFlow/index.ios.tsx @@ -82,10 +82,7 @@ function ConnectToHRFlow({setupLink, onDone}: ConnectToHRFlowProps) { /> - + diff --git a/src/components/ConnectToHRFlow/index.native.tsx b/src/components/ConnectToHRFlow/index.native.tsx index dedec1fbb620..b2457cee63bd 100644 --- a/src/components/ConnectToHRFlow/index.native.tsx +++ b/src/components/ConnectToHRFlow/index.native.tsx @@ -62,10 +62,7 @@ function ConnectToHRFlow({setupLink, onDone}: ConnectToHRFlowProps) { const renderLoading = () => ( - + ); diff --git a/src/components/Domain/CopyableTextField.tsx b/src/components/Domain/CopyableTextField.tsx index b3795cc01489..c2408963c6db 100644 --- a/src/components/Domain/CopyableTextField.tsx +++ b/src/components/Domain/CopyableTextField.tsx @@ -8,8 +8,6 @@ import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; - import type {StyleProp, TextStyle, ViewStyle} from 'react-native'; import React, {useState} from 'react'; @@ -40,17 +38,10 @@ function CopyableTextField({value, isLoading = false, style, textStyle, shouldDi const [expanded, setExpanded] = useState(false); const icons = useMemoizedLazyExpensifyIcons(['DownArrow', 'UpArrow']); - const copyableTextFieldLoadingReasonAttributes: SkeletonSpanReasonAttributes = { - context: 'CopyableTextField', - }; - return ( {isLoading ? ( - + ) : ( <> diff --git a/src/components/ExpensifyCardStatementPDFDownloadModal.tsx b/src/components/ExpensifyCardStatementPDFDownloadModal.tsx index b92f5a80fb0e..e53f6b447341 100644 --- a/src/components/ExpensifyCardStatementPDFDownloadModal.tsx +++ b/src/components/ExpensifyCardStatementPDFDownloadModal.tsx @@ -41,7 +41,6 @@ function ExpensifyCardStatementPDFDownloadModal({statementParams, isVisible, onC onModalHide={onModalHide} hasFinishedPDFDownload={hasFinishedPDFDownload} message={message} - loadingReasonContext="SearchBulkActions.ExpensifyCardStatementPDFModal" shouldCloseOnDownload shouldUseSuccessButton onDownloadPDF={() => { diff --git a/src/components/ExportDownloadStatusModal.tsx b/src/components/ExportDownloadStatusModal.tsx index a64eeae60087..086291969a4a 100644 --- a/src/components/ExportDownloadStatusModal.tsx +++ b/src/components/ExportDownloadStatusModal.tsx @@ -116,10 +116,7 @@ function ExportDownloadStatusModal({exportID, isVisible, onClose, failedBody}: E <> {translate('exportDownload.preparingTitle')} - + {translate('exportDownload.preparingBody')}