[Due for payment 2026-01-23] [$250] Refactor WorkspaceExpensifyCardPage loading component

[Julesssss]

Details

We recently improved the FullscreenLoadingIndicator by displaying a back button after 10 seconds to provide a recovery path in case of infinite loading.

The WorkspaceExpensifyCardPage component appears to be a case where we should now be using FullscreenLoadingIndicator instead of ActivityIndicator. It looks like we render this before HeaderWithBackButton is displayed, so there is a chance that the user gets stuck.

Parent issue with more context.

Solution

Verify this is the case and refactor the component to use FullScreenLoadingIndicator. to provide an escape recovery mechanism for users.

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022013443782367251648
• Upwork Job ID: 2013443782367251648
• Last Price Increase: 2026-01-27

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @akinwale (External)

[mkzie2]

Note: I was first to post the proposal based on timeline.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Refactor WorkspaceExpensifyCardPage loading component

What is the root cause of that problem?

Improvement

What changes do you think we should make in order to solve the problem?

Update here

return <FullScreenLoadingIndicator shouldUseGoBackButton />;

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx

Lines 45 to 49 in c99a23e

	return (
	<ActivityIndicator
	size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
	style={styles.flex1}
	/>

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[github-actions]

⚠️ @mkzie2 Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[btkcodedev]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The WorkspaceExpensifyCardPage component currently uses ActivityIndicator to display loading state while fetching Expensify Card data. If the API call hangs or experiences excessive delays, users become trapped on a blank loading screen with no navigation options, resulting in a degraded user experience and potential frustration.

What is the root cause of that problem?

The component renders ActivityIndicator during the initial data fetch, and the HeaderWithBackButton (which provides back navigation) only appears after loading completes successfully. This architectural pattern creates a critical UX gap: when API calls hang, timeout, or fail silently, users are stranded on a loading screen with no visible mechanism to exit or navigate away. The recently enhanced FullscreenLoadingIndicator component was specifically designed to address this exact scenario by providing an automatic "Go Back" button after 10 seconds, but WorkspaceExpensifyCardPage has not yet been migrated to use this improved component.

What changes do you think we should make in order to solve the problem?

Refactor WorkspaceExpensifyCardPage to replace ActivityIndicator with FullscreenLoadingIndicator and enable the automatic recovery mechanism:

1. Update imports: Replace ActivityIndicator import with FullscreenLoadingIndicator
2. Modify loading state rendering: Update the conditional rendering logic to use:

   <FullscreenLoadingIndicator shouldUseGoBackButton={true} />

3. Verify behavior: Ensure the back button appears after 10 seconds during loading states
4. Test recovery path: Confirm users can successfully navigate back when the "Go Back" button is triggered

This approach provides automatic user recovery without requiring manual timeout handling or additional state management.

What alternative solutions did you explore? (Optional)

None

[PiyushChandra17]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Refactor WorkspaceExpensifyCardPage loading component

What is the root cause of that problem?

Use FullScreenLoadingIndicator instead of ActivityIndicator here

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx

Line 46 in 7f8a463

<ActivityIndicator

What changes do you think we should make in order to solve the problem?

Replace ActivityIndicator with FullScreenLoadingIndicator

const renderContent = () => {
      if (!!isLoading && !paymentBankAccountID) {
          return (
              <FullScreenLoadingIndicator style={[styles.flex1]}/>
          );
      }

What alternative solutions did you explore? (Optional)

n/A

Result

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.