Skip to content

Commit 6de77fa

Browse files
youssef-lryoussef-lr
authored
Merge pull request Expensify#84712 from callstack-internal/fix/add-reason-attributes-reimbursement-account-skeletons
[No QA] Add reasonAttributes to FullscreenLoadingIndicator in ReimbursementAccount
2 parents a1d90e5 + 038f5f1 commit 6de77fa

11 files changed

Lines changed: 66 additions & 11 deletions

File tree

‎src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import type {ReimbursementAccountNavigatorParamList} from '@libs/Navigation/type
3030
import {goBackFromInvalidPolicy, isPendingDeletePolicy, isPolicyAdmin} from '@libs/PolicyUtils';
3131
import {getRouteForCurrentStep, hasInProgressUSDVBBA, hasInProgressVBBA} from '@libs/ReimbursementAccountUtils';
3232
import shouldReopenOnfido from '@libs/shouldReopenOnfido';
33+
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
3334
import {isFullScreenName} from '@navigation/helpers/isNavigatorName';
3435
import type {WithPolicyOnyxProps} from '@pages/workspace/withPolicy';
3536
import withPolicy from '@pages/workspace/withPolicy';
@@ -487,7 +488,11 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy, navigation}:
487488
}
488489

489490
if (isLoadingPolicy) {
490-
return <FullScreenLoadingIndicator />;
491+
const loadingPolicyReasonAttributes: SkeletonSpanReasonAttributes = {
492+
context: 'ReimbursementAccountPage',
493+
isLoadingPolicy,
494+
};
495+
return <FullScreenLoadingIndicator reasonAttributes={loadingPolicyReasonAttributes} />;
491496
}
492497

493498
// Show loading indicator when page is first time being opened and props.reimbursementAccount yet to be loaded from the server

‎src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/AddressBusiness.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import useLocalize from '@hooks/useLocalize';
55
import useOnyx from '@hooks/useOnyx';
66
import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
77
import type {SubStepProps} from '@hooks/useSubStep/types';
8+
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
89
import ONYXKEYS from '@src/ONYXKEYS';
910
import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
1011
import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
@@ -41,7 +42,11 @@ function AddressBusiness({onNext, onMove, isEditing}: SubStepProps) {
4142
});
4243

4344
if (isLoadingReimbursementAccount) {
44-
return <FullScreenLoadingIndicator />;
45+
const reasonAttributes: SkeletonSpanReasonAttributes = {
46+
context: 'AddressBusiness',
47+
isLoadingReimbursementAccount,
48+
};
49+
return <FullScreenLoadingIndicator reasonAttributes={reasonAttributes} />;
4550
}
4651

4752
return (

‎src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/IncorporationDateBusiness.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import useOnyx from '@hooks/useOnyx';
1010
import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
1111
import type {SubStepProps} from '@hooks/useSubStep/types';
1212
import useThemeStyles from '@hooks/useThemeStyles';
13+
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
1314
import {getFieldRequiredErrors, isValidDate, isValidPastDate} from '@libs/ValidationUtils';
1415
import ONYXKEYS from '@src/ONYXKEYS';
1516
import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
@@ -50,7 +51,11 @@ function IncorporationDateBusiness({onNext, isEditing}: SubStepProps) {
5051
});
5152

5253
if (isLoadingReimbursementAccount) {
53-
return <FullScreenLoadingIndicator />;
54+
const reasonAttributes: SkeletonSpanReasonAttributes = {
55+
context: 'IncorporationDateBusiness',
56+
isLoadingReimbursementAccount,
57+
};
58+
return <FullScreenLoadingIndicator reasonAttributes={reasonAttributes} />;
5459
}
5560

5661
return (

‎src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/IncorporationStateBusiness.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import useOnyx from '@hooks/useOnyx';
1111
import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
1212
import type {SubStepProps} from '@hooks/useSubStep/types';
1313
import useThemeStyles from '@hooks/useThemeStyles';
14+
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
1415
import {getFieldRequiredErrors} from '@libs/ValidationUtils';
1516
import ONYXKEYS from '@src/ONYXKEYS';
1617
import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
@@ -40,7 +41,11 @@ function IncorporationStateBusiness({onNext, isEditing}: SubStepProps) {
4041
});
4142

4243
if (isLoadingReimbursementAccount) {
43-
return <FullScreenLoadingIndicator />;
44+
const reasonAttributes: SkeletonSpanReasonAttributes = {
45+
context: 'IncorporationStateBusiness',
46+
isLoadingReimbursementAccount,
47+
};
48+
return <FullScreenLoadingIndicator reasonAttributes={reasonAttributes} />;
4449
}
4550

4651
return (

‎src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/PhoneNumberBusiness.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import useLocalize from '@hooks/useLocalize';
66
import useOnyx from '@hooks/useOnyx';
77
import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
88
import type {SubStepProps} from '@hooks/useSubStep/types';
9+
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
910
import {getFieldRequiredErrors, isValidUSPhone} from '@libs/ValidationUtils';
1011
import CONST from '@src/CONST';
1112
import ONYXKEYS from '@src/ONYXKEYS';
@@ -44,7 +45,11 @@ function PhoneNumberBusiness({onNext, onMove, isEditing}: SubStepProps) {
4445
});
4546

4647
if (isLoadingReimbursementAccount) {
47-
return <FullScreenLoadingIndicator />;
48+
const reasonAttributes: SkeletonSpanReasonAttributes = {
49+
context: 'PhoneNumberBusiness',
50+
isLoadingReimbursementAccount,
51+
};
52+
return <FullScreenLoadingIndicator reasonAttributes={reasonAttributes} />;
4853
}
4954

5055
return (

‎src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/TaxIdBusiness.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import useLocalize from '@hooks/useLocalize';
66
import useOnyx from '@hooks/useOnyx';
77
import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
88
import type {SubStepProps} from '@hooks/useSubStep/types';
9+
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
910
import {getFieldRequiredErrors, isValidTaxID} from '@libs/ValidationUtils';
1011
import CONST from '@src/CONST';
1112
import ONYXKEYS from '@src/ONYXKEYS';
@@ -52,7 +53,11 @@ function TaxIdBusiness({onNext, onMove, isEditing}: SubStepProps) {
5253
});
5354

5455
if (isLoadingReimbursementAccount) {
55-
return <FullScreenLoadingIndicator />;
56+
const reasonAttributes: SkeletonSpanReasonAttributes = {
57+
context: 'TaxIdBusiness',
58+
isLoadingReimbursementAccount,
59+
};
60+
return <FullScreenLoadingIndicator reasonAttributes={reasonAttributes} />;
5661
}
5762

5863
return (

‎src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/TypeBusiness/TypeBusiness.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import useOnyx from '@hooks/useOnyx';
99
import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
1010
import type {SubStepProps} from '@hooks/useSubStep/types';
1111
import useThemeStyles from '@hooks/useThemeStyles';
12+
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
1213
import {getFieldRequiredErrors} from '@libs/ValidationUtils';
1314
import ONYXKEYS from '@src/ONYXKEYS';
1415
import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
@@ -37,7 +38,11 @@ function TypeBusiness({onNext, isEditing}: SubStepProps) {
3738
});
3839

3940
if (isLoadingReimbursementAccount) {
40-
return <FullScreenLoadingIndicator />;
41+
const reasonAttributes: SkeletonSpanReasonAttributes = {
42+
context: 'TypeBusiness',
43+
isLoadingReimbursementAccount,
44+
};
45+
return <FullScreenLoadingIndicator reasonAttributes={reasonAttributes} />;
4146
}
4247

4348
return (

‎src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/WebsiteBusiness.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import useOnyx from '@hooks/useOnyx';
88
import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
99
import type {SubStepProps} from '@hooks/useSubStep/types';
1010
import {getDefaultCompanyWebsite} from '@libs/BankAccountUtils';
11+
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
1112
import {getFieldRequiredErrors, isValidWebsite} from '@libs/ValidationUtils';
1213
import {addBusinessWebsiteForDraft} from '@userActions/BankAccounts';
1314
import CONST from '@src/CONST';
@@ -51,7 +52,11 @@ function WebsiteBusiness({onNext, onMove, isEditing}: SubStepProps) {
5152
});
5253

5354
if (isLoadingReimbursementAccount) {
54-
return <FullScreenLoadingIndicator />;
55+
const reasonAttributes: SkeletonSpanReasonAttributes = {
56+
context: 'WebsiteBusiness',
57+
isLoadingReimbursementAccount,
58+
};
59+
return <FullScreenLoadingIndicator reasonAttributes={reasonAttributes} />;
5560
}
5661

5762
return (

‎src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/subSteps/Address.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import useLocalize from '@hooks/useLocalize';
55
import useOnyx from '@hooks/useOnyx';
66
import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
77
import type {SubStepProps} from '@hooks/useSubStep/types';
8+
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
89
import CONST from '@src/CONST';
910
import ONYXKEYS from '@src/ONYXKEYS';
1011
import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
@@ -42,7 +43,11 @@ function Address({onNext, onMove, isEditing}: SubStepProps) {
4243
});
4344

4445
if (isLoadingReimbursementAccount) {
45-
return <FullScreenLoadingIndicator />;
46+
const reasonAttributes: SkeletonSpanReasonAttributes = {
47+
context: 'Address',
48+
isLoadingReimbursementAccount,
49+
};
50+
return <FullScreenLoadingIndicator reasonAttributes={reasonAttributes} />;
4651
}
4752

4853
return (

‎src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/subSteps/DateOfBirth.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import useOnyx from '@hooks/useOnyx';
66
import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
77
import type {SubStepProps} from '@hooks/useSubStep/types';
88
import useThemeStyles from '@hooks/useThemeStyles';
9+
import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
910
import HelpLinks from '@pages/ReimbursementAccount/USD/Requestor/PersonalInfo/HelpLinks';
1011
import CONST from '@src/CONST';
1112
import ONYXKEYS from '@src/ONYXKEYS';
@@ -32,7 +33,11 @@ function DateOfBirth({onNext, onMove, isEditing}: SubStepProps) {
3233
});
3334

3435
if (isLoadingReimbursementAccount) {
35-
return <FullScreenLoadingIndicator />;
36+
const reasonAttributes: SkeletonSpanReasonAttributes = {
37+
context: 'DateOfBirth',
38+
isLoadingReimbursementAccount,
39+
};
40+
return <FullScreenLoadingIndicator reasonAttributes={reasonAttributes} />;
3641
}
3742

3843
return (

0 commit comments

Comments
 (0)