Merge pull request Expensify#84720 from callstack-internal/fix/83395-charts-activity-indicator-reason-attributes

[No QA] Add reasonAttributes to Chart ActivityIndicators

Author: youssef-lr

src/components/Charts/BarChart/BarChartContent.tsx

@@ -18,6 +18,7 @@ import {calculateMinDomainPadding, DEFAULT_CHART_COLOR, getChartColor} from '@co
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import variables from '@styles/variables';
 
 /** Inner padding between bars (0.3 = 30% of bar width) */
@@ -180,9 +181,13 @@ function BarChartContent({data, title, titleIcon, isLoading, yAxisUnit, yAxisUni
     const chartPadding = {...CHART_PADDING, bottom: labelSpace + CHART_PADDING.bottom};
 
     if (isLoading || !font) {
+        const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'BarChartContent', isLoading, isFontLoading: !font};
         return (
             <View style={[styles.barChartContainer, styles.highlightBG, shouldUseNarrowLayout ? styles.p5 : styles.p8, styles.justifyContentCenter, styles.alignItemsCenter]}>
-                <ActivityIndicator size="large" />
+                <ActivityIndicator
+                    size="large"
+                    reasonAttributes={reasonAttributes}
+                />
             </View>
         );
     }

src/components/Charts/BarChart/index.tsx

@@ -3,11 +3,13 @@ import React from 'react';
 import {View} from 'react-native';
 import ActivityIndicator from '@components/ActivityIndicator';
 import useThemeStyles from '@hooks/useThemeStyles';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import type {BarChartProps} from './BarChartContent';
 
 const getBarChartContent = () => import('./BarChartContent');
 function BarChart(props: BarChartProps) {
     const styles = useThemeStyles();
+    const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'BarChart.SkiaWebLoading'};
 
     return (
         <WithSkiaWeb
@@ -16,7 +18,10 @@ function BarChart(props: BarChartProps) {
             componentProps={props}
             fallback={
                 <View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter, styles.highlightBG, styles.br4, styles.p5]}>
-                    <ActivityIndicator size="large" />
+                    <ActivityIndicator
+                        size="large"
+                        reasonAttributes={reasonAttributes}
+                    />
                 </View>
             }
         />

src/components/Charts/LineChart/LineChartContent.tsx

@@ -19,6 +19,7 @@ import {calculateMinDomainPadding, DEFAULT_CHART_COLOR, measureTextWidth} from '
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import variables from '@styles/variables';
 
 /** Inner dot radius for line chart data points */
@@ -174,9 +175,13 @@ function LineChartContent({data, title, titleIcon, isLoading, yAxisUnit, yAxisUn
     const chartPadding = {...CHART_PADDING, bottom: labelSpace + CHART_PADDING.bottom};
 
     if (isLoading || !font) {
+        const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'LineChartContent', isLoading, isFontLoading: !font};
         return (
             <View style={[styles.lineChartContainer, styles.highlightBG, shouldUseNarrowLayout ? styles.p5 : styles.p8, styles.justifyContentCenter, styles.alignItemsCenter]}>
-                <ActivityIndicator size="large" />
+                <ActivityIndicator
+                    size="large"
+                    reasonAttributes={reasonAttributes}
+                />
             </View>
         );
     }

src/components/Charts/LineChart/index.tsx

@@ -3,10 +3,12 @@ import React from 'react';
 import {View} from 'react-native';
 import ActivityIndicator from '@components/ActivityIndicator';
 import useThemeStyles from '@hooks/useThemeStyles';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import type {LineChartProps} from './LineChartContent';
 
 function LineChart(props: LineChartProps) {
     const styles = useThemeStyles();
+    const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'LineChart.SkiaWebLoading'};
 
     return (
         <WithSkiaWeb
@@ -15,7 +17,10 @@ function LineChart(props: LineChartProps) {
             componentProps={props}
             fallback={
                 <View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter, styles.highlightBG, styles.br4, styles.p5]}>
-                    <ActivityIndicator size="large" />
+                    <ActivityIndicator
+                        size="large"
+                        reasonAttributes={reasonAttributes}
+                    />
                 </View>
             }
         />

src/components/Charts/PieChart/PieChartContent.tsx

@@ -14,6 +14,7 @@ import type {ChartDataPoint, ChartProps, PieSlice, UnitPosition} from '@componen
 import {findSliceAtPosition, processDataIntoSlices} from '@components/Charts/utils';
 import Text from '@components/Text';
 import useThemeStyles from '@hooks/useThemeStyles';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 
 type PieChartProps = ChartProps & {
     /** Callback when a slice is pressed */
@@ -133,9 +134,13 @@ function PieChartContent({data, title, titleIcon, isLoading, valueUnit, valueUni
     };
 
     if (isLoading) {
+        const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'PieChartContent', isLoading};
         return (
             <View style={[styles.pieChartContainer, styles.highlightBG, styles.justifyContentCenter, styles.alignItemsCenter]}>
-                <ActivityIndicator size="large" />
+                <ActivityIndicator
+                    size="large"
+                    reasonAttributes={reasonAttributes}
+                />
             </View>
         );
     }

src/components/Charts/PieChart/index.tsx

@@ -3,12 +3,14 @@ import React from 'react';
 import {View} from 'react-native';
 import ActivityIndicator from '@components/ActivityIndicator';
 import useThemeStyles from '@hooks/useThemeStyles';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import type {PieChartProps} from './PieChartContent';
 
 const getPieChartContent = () => import('./PieChartContent');
 
 function PieChart(props: PieChartProps) {
     const styles = useThemeStyles();
+    const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'PieChart.SkiaWebLoading'};
 
     return (
         <WithSkiaWeb
@@ -17,7 +19,10 @@ function PieChart(props: PieChartProps) {
             componentProps={props}
             fallback={
                 <View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter, styles.highlightBG, styles.br4, styles.p5]}>
-                    <ActivityIndicator size="large" />
+                    <ActivityIndicator
+                        size="large"
+                        reasonAttributes={reasonAttributes}
+                    />
                 </View>
             }
         />