Skip to content

[No QA] Add reasonAttributes to accounting and company cards skeleton usages #84723

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 3 commits into from
Mar 11, 2026
Merged

[No QA] Add reasonAttributes to accounting and company cards skeleton usages #84723

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ffc3990
Add reasonAttributes to accounting and company cards skeleton usages
sosek108 Mar 10, 2026
258a00e
Fix inverted hasResultOfFetchingSetupLink in reasonAttributes
sosek108 Mar 10, 2026
3479227
prettier fixes
sosek108 Mar 11, 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
10 changes: 9 additions & 1 deletion src/pages/workspace/accounting/PolicyAccountingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ import {
settingsPendingAction,
shouldShowSyncError,
} from '@libs/PolicyUtils';
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
import Navigation from '@navigation/Navigation';
import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
import withPolicyConnections from '@pages/workspace/withPolicyConnections';
Expand Down Expand Up @@ -417,6 +418,10 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) {
},
];

const syncActivityReasonAttributes: SkeletonSpanReasonAttributes = {
context: 'PolicyAccountingPage.connectionsMenuItems',
isSyncInProgress,
};
return [
{
...iconProps,
Expand All @@ -429,7 +434,10 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) {
shouldShowRedDotIndicator: true,
description: connectionMessage,
rightComponent: isSyncInProgress ? (
<ActivityIndicator style={[styles.popoverMenuIcon]} />
<ActivityIndicator
style={[styles.popoverMenuIcon]}
reasonAttributes={syncActivityReasonAttributes}
/>
) : (
<ThreeDotsMenu
shouldSelfPosition
Expand Down
8 changes: 7 additions & 1 deletion src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
import Navigation from '@libs/Navigation/Navigation';
import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
import {setConnectionError} from '@userActions/connections';
import {getQuickbooksDesktopCodatSetupLink} from '@userActions/connections/QuickbooksDesktop';
import {enablePolicyTaxes} from '@userActions/Policy/Policy';
Expand Down Expand Up @@ -75,6 +76,11 @@ function RequireQuickBooksDesktopModal({route}: RequireQuickBooksDesktopModalPro

const shouldShowError = hasError;

const activityReasonAttributes: SkeletonSpanReasonAttributes = {
context: 'RequireQuickBooksDesktopModal',
hasResultOfFetchingSetupLink,
};

const children = (
<>
{shouldShowError && (
Expand All @@ -100,7 +106,7 @@ function RequireQuickBooksDesktopModal({route}: RequireQuickBooksDesktopModalPro
<Text style={[styles.textSupporting, styles.textNormal, styles.pt4]}>{translate('workspace.qbd.setupPage.body')}</Text>
<View style={[styles.qbdSetupLinkBox, styles.mt5]}>
{!hasResultOfFetchingSetupLink ? (
<ActivityIndicator />
<ActivityIndicator reasonAttributes={activityReasonAttributes} />
) : (
<CopyTextToClipboard
text={codatSetupLink}
Expand Down
14 changes: 13 additions & 1 deletion src/pages/workspace/companyCards/BankConnection/index.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {setAssignCardStepAndData} from '@libs/actions/CompanyCards';
import {checkIfNewFeedConnected, getBankName, getCompanyCardFeed, isSelectedFeedExpired} from '@libs/CardUtils';
import getUAForWebView from '@libs/getUAForWebView';
import Navigation from '@libs/Navigation/Navigation';
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
import type {PlatformStackRouteProp} from '@navigation/PlatformStackNavigation/types';
import type {SettingsNavigatorParamList} from '@navigation/types';
import WorkspaceCompanyCardsErrorConfirmation from '@pages/workspace/companyCards/WorkspaceCompanyCardsErrorConfirmation';
Expand Down Expand Up @@ -71,7 +72,17 @@ function BankConnection({policyID: policyIDFromProps, feed, route}: BankConnecti
const isNewFeedHasError = !!(newFeed && cardFeeds?.[newFeed]?.errors);
const {isBlockedToAddNewFeeds, isAllFeedsResultLoading} = useIsBlockedToAddFeed(policyID);

const renderLoading = () => <FullScreenLoadingIndicator />;
const fullscreenReasonAttributes: SkeletonSpanReasonAttributes = {
context: 'BankConnection',
};
const activityReasonAttributes: SkeletonSpanReasonAttributes = {
context: 'BankConnection',
isAllFeedsResultLoading,
isBlockedToAddNewFeedsWithoutFeed: isBlockedToAddNewFeeds && !feed,
isConnectionCompleted,
isPlaid,
};
const renderLoading = () => <FullScreenLoadingIndicator reasonAttributes={fullscreenReasonAttributes} />;

useEffect(() => {
if (!policyID || !isBlockedToAddNewFeeds || feed) {
Expand Down Expand Up @@ -189,6 +200,7 @@ function BankConnection({policyID: policyIDFromProps, feed, route}: BankConnecti
<ActivityIndicator
size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
style={styles.flex1}
reasonAttributes={activityReasonAttributes}
/>
)}
{isNewFeedHasError && (
Expand Down
8 changes: 8 additions & 0 deletions src/pages/workspace/companyCards/BankConnection/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import useUpdateFeedBrokenConnection from '@hooks/useUpdateFeedBrokenConnection'
import {setAssignCardStepAndData} from '@libs/actions/CompanyCards';
import {checkIfNewFeedConnected, getBankName, getCompanyCardFeed, isSelectedFeedExpired} from '@libs/CardUtils';
import Navigation from '@libs/Navigation/Navigation';
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
import type {PlatformStackRouteProp} from '@navigation/PlatformStackNavigation/types';
import type {SettingsNavigatorParamList} from '@navigation/types';
import WorkspaceCompanyCardsErrorConfirmation from '@pages/workspace/companyCards/WorkspaceCompanyCardsErrorConfirmation';
Expand Down Expand Up @@ -214,10 +215,17 @@ function BankConnection({policyID: policyIDFromProps, feed, route}: BankConnecti
/>
);
}
const activityReasonAttributes: SkeletonSpanReasonAttributes = {
context: 'BankConnection',
isPlaid,
isAllFeedsResultLoading,
isBlockedToAddNewFeedsWithoutFeed: isBlockedToAddNewFeeds && !feed,
};
return (
<ActivityIndicator
size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
style={styles.flex1}
reasonAttributes={activityReasonAttributes}
/>
);
};
Expand Down
13 changes: 12 additions & 1 deletion src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils';
import {getConnectedIntegration} from '@libs/PolicyUtils';
import {buildCannedSearchQuery} from '@libs/SearchQueryUtils';
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
import Navigation from '@navigation/Navigation';
import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
Expand Down Expand Up @@ -120,6 +121,11 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
return format(getLocalDateFromDatetime(card?.lastScrape), CONST.DATE.FNS_DATE_TIME_FORMAT_STRING);
}, [getLocalDateFromDatetime, card?.lastScrape, translate]);

const lastUpdatedActivityReasonAttributes: SkeletonSpanReasonAttributes = {
context: 'WorkspaceCompanyCardDetailsPage',
isLoadingLastUpdated: card?.isLoadingLastUpdated,
};

// Don't show NotFoundPage if card is being unassigned or data is still loading
if ((!card && !isUnassigningRef.current && !isLoadingOnyxValue(allBankCardsMetadata) && !isLoadingOnyxValue(cardListMetadata)) || (isCardBeingUnassigned && !isUnassigningRef.current)) {
return <NotFoundPage />;
Expand Down Expand Up @@ -221,7 +227,12 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
) : null}
<MenuItemWithTopDescription
shouldShowRightComponent={card?.isLoadingLastUpdated}
rightComponent={<ActivityIndicator style={[styles.popoverMenuIcon]} />}
rightComponent={
<ActivityIndicator
style={[styles.popoverMenuIcon]}
reasonAttributes={lastUpdatedActivityReasonAttributes}
/>
}
description={translate('workspace.moreFeatures.companyCards.lastUpdated')}
title={card?.isLoadingLastUpdated ? translate('workspace.moreFeatures.companyCards.updating') : lastScrape}
interactive={false}
Expand Down
10 changes: 9 additions & 1 deletion src/pages/workspace/companyCards/addNew/PlaidConnectionStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {setAddNewCompanyCardStepAndData, setAssignCardStepAndData} from '@libs/a
import KeyboardShortcut from '@libs/KeyboardShortcut';
import Log from '@libs/Log';
import {getDomainNameForPolicy} from '@libs/PolicyUtils';
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
import Navigation from '@navigation/Navigation';
import {handleRestrictedEvent} from '@userActions/App';
import {setPlaidEvent} from '@userActions/BankAccounts';
Expand Down Expand Up @@ -194,9 +195,16 @@ function PlaidConnectionStep({feed, policyID, onExit}: {feed?: CompanyCardFeedWi
}

if (plaidData?.isLoading) {
const reasonAttributes: SkeletonSpanReasonAttributes = {
context: 'PlaidConnectionStep.renderPlaidLink',
isPlaidDataLoading: plaidData?.isLoading,
};
return (
<View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
<ActivityIndicator size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE} />
<ActivityIndicator
size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
reasonAttributes={reasonAttributes}
/>
</View>
);
}
Expand Down
6 changes: 6 additions & 0 deletions src/pages/workspace/companyCards/assignCard/TransactionStartDateStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import Text from '@components/Text';
import useLocalize from '@hooks/useLocalize';
import useOnyx from '@hooks/useOnyx';
import useThemeStyles from '@hooks/useThemeStyles';
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
import {isRequiredFulfilled} from '@libs/ValidationUtils';
import Navigation from '@navigation/Navigation';
import {setAssignCardStepAndData} from '@userActions/CompanyCards';
Expand Down Expand Up @@ -85,6 +86,10 @@ function TransactionStartDateStep() {
];

const isLoading = isLoadingOnyxValue(assignCardMeta);
const activityReasonAttributes: SkeletonSpanReasonAttributes = {
context: 'TransactionStartDateStep',
isLoading,
};

return (
<InteractiveStepWrapper
Expand All @@ -97,6 +102,7 @@ function TransactionStartDateStep() {
<ActivityIndicator
size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
style={styles.h100}
reasonAttributes={activityReasonAttributes}
/>
) : (
<>
Expand Down
Loading