Skip to content

[No QA] Add reasonAttributes to ActivityIndicator usages #84725

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
youssef-lr merged 2 commits into from
Mar 11, 2026
Merged

[No QA] Add reasonAttributes to ActivityIndicator usages #84725

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
16545c8
Add reasonAttributes to ActivityIndicator usages
sosek108 Mar 10, 2026
bee288f
Merge remote-tracking branch 'exfy/main' into fix/add-reasonAttribute…
sosek108 Mar 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 16 additions & 7 deletions src/components/AddressSearch/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ 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';
import CONST from '@src/CONST';
import type {Address} from '@src/types/onyx/PrivatePersonalDetails';
Expand Down Expand Up @@ -331,14 +332,19 @@ function AddressSearch({
[isTyping, styles, translate],
);

const listLoader = useMemo(
() => (
const listLoader = useMemo(() => {
const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'AddressSearch.listLoader'};

@situchan situchan Mar 10, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NAB: Move this to the top of the file as not dependent on component lifecycle

return (
<View style={[styles.pv4]}>
<ActivityIndicator />
<ActivityIndicator reasonAttributes={reasonAttributes} />
</View>
),
[styles.pv4],
);
);
}, [styles.pv4]);

const fetchingLocationReasonAttributes: SkeletonSpanReasonAttributes = {
context: 'AddressSearch.isFetchingCurrentLocation',
isFetchingCurrentLocation,
};

return (
/*
Expand Down Expand Up @@ -480,7 +486,10 @@ function AddressSearch({
</ScrollView>
{isFetchingCurrentLocation && (
<View style={[StyleSheet.absoluteFillObject, styles.fullScreenLoading, styles.w100]}>
<ActivityIndicator size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE} />
<ActivityIndicator
size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
reasonAttributes={fetchingLocationReasonAttributes}
/>
</View>
)}
</>
Expand Down
6 changes: 6 additions & 0 deletions src/components/TextInput/BaseTextInput/implementation/index.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import isInputAutoFilled from '@libs/isInputAutoFilled';
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
import variables from '@styles/variables';
import CONST from '@src/CONST';

Expand Down Expand Up @@ -288,6 +289,10 @@ function BaseTextInput({
// Height fix is needed only for Text single line inputs
const shouldApplyHeight = !shouldUseFullInputHeight && !isMultiline && !isMarkdownEnabled;
const accessibilityLabel = [label, hint].filter(Boolean).join(', ');
const loadingSpinnerReasonAttributes: SkeletonSpanReasonAttributes = {
context: 'BaseTextInput.isLoading',
isLoading: !!inputProps.isLoading,
};

return (
<>
Expand Down Expand Up @@ -443,6 +448,7 @@ function BaseTextInput({
<ActivityIndicator
color={theme.iconSuccessFill}
style={[StyleUtils.getTextInputIconContainerStyles(hasLabel, false, verticalPaddingDiff), styles.ml1, loadingSpinnerStyle]}
reasonAttributes={loadingSpinnerReasonAttributes}
/>
)}
{!!inputProps.secureTextEntry && (
Expand Down
7 changes: 7 additions & 0 deletions src/components/TextInput/BaseTextInput/implementation/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
import {isMobileChrome, isMobileSafari, isSafari} from '@libs/Browser';
import {scrollToRight} from '@libs/InputUtils';
import isInputAutoFilled from '@libs/isInputAutoFilled';
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
import variables from '@styles/variables';
import CONST from '@src/CONST';

Expand Down Expand Up @@ -327,6 +328,11 @@ function BaseTextInput({
// If we need some other inputMode (eg. 'decimal'), then the autocomplete bar will show, but we can do nothing about it as it's a known Chrome bug.
const inputMode = inputProps.inputMode ?? (isMobileChrome() ? 'search' : undefined);
const accessibilityLabel = [label, hint, errorText ? translate('common.yourReviewIsRequired') : ''].filter(Boolean).join(', ');
const loadingSpinnerReasonAttributes: SkeletonSpanReasonAttributes = {
context: 'BaseTextInput.isLoading',
isLoading: !!inputProps.isLoading,
};

return (
<>
<View
Expand Down Expand Up @@ -527,6 +533,7 @@ function BaseTextInput({
<ActivityIndicator
color={theme.iconSuccessFill}
style={[StyleUtils.getTextInputIconContainerStyles(hasLabel, false, verticalPaddingDiff), styles.ml1, loadingSpinnerStyle]}
reasonAttributes={loadingSpinnerReasonAttributes}
/>
)}
{!!inputProps.secureTextEntry && (
Expand Down
13 changes: 12 additions & 1 deletion src/pages/domain/Saml/SamlConfigurationDetailsSectionContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
import {getSamlSettings, setSamlIdentity} from '@libs/actions/Domain';
import {getLatestErrorMessage} from '@libs/ErrorUtils';
import StringUtils from '@libs/StringUtils';
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
import variables from '@styles/variables';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
Expand Down Expand Up @@ -41,7 +42,17 @@ function SamlConfigurationDetailsSectionContent({accountID, domainName, shouldSh
}, [accountID, domainName]);

if (samlMetadata?.isLoading || isLoadingOnyxValue(samlMetadataResults)) {
return <ActivityIndicator size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE} />;
const reasonAttributes: SkeletonSpanReasonAttributes = {
context: 'SamlConfigurationDetailsSectionContent.loading',
isSamlMetadataLoading: !!samlMetadata?.isLoading,
isLoadingOnyxValue: isLoadingOnyxValue(samlMetadataResults),
};
return (
<ActivityIndicator
size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
reasonAttributes={reasonAttributes}
/>
);
}

if (samlMetadata?.errors) {
Expand Down
7 changes: 6 additions & 1 deletion src/pages/inbox/report/ListBoundaryLoader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Text from '@components/Text';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import useThemeStyles from '@hooks/useThemeStyles';
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
import CONST from '@src/CONST';

type ListBoundaryLoaderProps = {
Expand Down Expand Up @@ -99,9 +100,13 @@ function ListBoundaryLoader({
if (type === CONST.LIST_COMPONENTS.HEADER && isLoadingNewerReportActions) {
// applied for a header of the list, i.e. when you scroll to the bottom of the list
// the styles for android and the rest components are different that's why we use two different components
const reasonAttributes: SkeletonSpanReasonAttributes = {
context: 'ListBoundaryLoader.header',
isLoadingNewerReportActions,
};
return (
<View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.listBoundaryLoader]}>
<ActivityIndicator />
<ActivityIndicator reasonAttributes={reasonAttributes} />
</View>
);
}
Expand Down
11 changes: 10 additions & 1 deletion src/pages/settings/Profile/ProfilePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import Navigation from '@libs/Navigation/Navigation';
import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types';
import type {SettingsSplitNavigatorParamList} from '@libs/Navigation/types';
import {getDisplayNameOrDefault, getFormattedAddress} from '@libs/PersonalDetailsUtils';
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
import {getContactMethodsOptions, getLoginListBrickRoadIndicator} from '@libs/UserUtils';
import CONST from '@src/CONST';
import type {TranslationPaths} from '@src/languages/types';
Expand Down Expand Up @@ -161,6 +162,11 @@ function ProfilePage() {
},
];

const privateSectionReasonAttributes: SkeletonSpanReasonAttributes = {
context: 'ProfilePage.privateSection',
isLoadingApp: !!isLoadingApp,
};

return (
<ScreenWrapper
includeSafeAreaPaddingBottom={false}
Expand Down Expand Up @@ -258,7 +264,10 @@ function ProfilePage() {
>
{isLoadingApp ? (
<View style={[styles.flex1, styles.pRelative, StyleUtils.getBackgroundColorStyle(theme.cardBG)]}>
<ActivityIndicator size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE} />
<ActivityIndicator
size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
reasonAttributes={privateSectionReasonAttributes}
/>
</View>
) : (
<MenuItemGroup shouldUseSingleExecution={!isActingAsDelegate}>
Expand Down
7 changes: 7 additions & 0 deletions src/pages/settings/Rules/ExpenseRulesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import {canUseTouchScreen} from '@libs/DeviceCapabilities';
import {formatExpenseRuleChanges, getKeyForRule} from '@libs/ExpenseRuleUtils';
import Navigation from '@libs/Navigation/Navigation';
import Parser from '@libs/Parser';
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
import tokenizedSearch from '@libs/tokenizedSearch';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
Expand Down Expand Up @@ -228,6 +229,11 @@ function ExpenseRulesPage() {
/>
);

const loadingReasonAttributes: SkeletonSpanReasonAttributes = {
context: 'ExpenseRulesPage.loading',
isLoading,
};

return (
<ScreenWrapper
enableEdgeToEdgeBottomSafeAreaPadding
Expand Down Expand Up @@ -279,6 +285,7 @@ function ExpenseRulesPage() {
<ActivityIndicator
size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
style={[styles.flex1]}
reasonAttributes={loadingReasonAttributes}
/>
)}
{hasRules && (
Expand Down
Loading