Skip to content

[$125] Use valid loading indicator in WalletStatementModal/index.tsx #85389

@mateuuszzzzz

Description

@mateuuszzzzz

Details

As part of the loading indicator standardization, we are preparing to enable shouldUseGoBackButton by default in FullscreenLoadingIndicator. Before that, we need to migrate components where FullscreenLoadingIndicator is used alongside visible navigation to use ActivityIndicator instead, otherwise users would see two back controls (the header back button AND the Go Back button from the loader).

WalletStatementModal (web) is used by WalletStatementPage, which renders a ScreenWrapper with HeaderWithBackButton (statement title) and FullPageOfflineBlockingView. The modal renders an iframe that loads the statement page and uses {isLoading && <FullscreenLoadingIndicator />} as an overlay while the iframe loads. Important: The iframe MUST stay mounted while loading, the overlay pattern (loader on top of iframe) must be preserved, not a ternary that conditionally renders either the loader or the iframe. If the iframe is unmounted during loading, its onLoad callback never fires and isLoading would never become false.

Solution

Replace FullscreenLoadingIndicator with ActivityIndicator in src/components/WalletStatementModal/index.tsx. Keep the overlay pattern: the iframe must remain mounted at all times. The loading indicator should overlay it when isLoading is true. The replacement must be an ActivityIndicator wrapped in a parent View that provides the same layout and background styling as FullscreenLoadingIndicator. The loading state must be pixel-perfect identical after the change. Same background color, same opacity, same centered large spinner in the content area below the header.

Before making any changes, read the FullscreenLoadingIndicator component source to understand what styles it applies internally, and make sure the replacement reproduces them exactly. ActivityIndicator is a raw spinner with no layout or background styling, so it should not be used on its own as a fullscreen loading state. The codebase convention is to wrap it in a parent View that provides the layout and background styling.

Parent issue: #69850

Issue OwnerCurrent Issue Owner: @mateuuszzzzz

Metadata

Metadata

Labels

EngineeringInternalRequires API changes or must be handled by Expensify staffMonthlyKSv2Task

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions