[Due for payment 2026-03-30] [$125] Use valid loading indicator in `VerifyAccountPageBase.tsx`

[Julesssss]

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).

VerifyAccountPageBase.tsx renders HeaderWithBackButton and FullscreenLoadingIndicator as siblings inside ScreenWrapper when isUserValidated is true (the transitional state before navigating away). The header back button is always visible during this loading state, so the user can already navigate away. FullscreenLoadingIndicator is unnecessary here and should be replaced with a plain ActivityIndicator.

This is a widely shared base component used by 15+ verify account pages across the app (wallet, travel, security, contacts, invoices, etc.), so this single migration fixes the loading pattern for all of them.

Solution

Replace FullscreenLoadingIndicator with ActivityIndicator in src/pages/settings/VerifyAccountPageBase.tsx. 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, summary comment

Issue Owner

Current Issue Owner: @situchan

[MelvinBot]

Proposal

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

VerifyAccountPageBase.tsx renders HeaderWithBackButton and FullScreenLoadingIndicator as siblings inside ScreenWrapper when isUserValidated is true (VerifyAccountPageBase.tsx:74-87). Since the header back button is already visible, the user can navigate away without the Go Back button that FullScreenLoadingIndicator will soon enable by default (as part of the loading indicator standardization in #69850). This would result in two back controls being visible simultaneously. We need to replace FullScreenLoadingIndicator with a plain ActivityIndicator wrapped in a styled View to prevent this.

What is the root cause of that problem?

FullScreenLoadingIndicator is being used in a context where a header back button already exists. When shouldUseGoBackButton becomes the default, FullScreenLoadingIndicator will render its own Go Back button alongside the header's back button. The root cause is that FullScreenLoadingIndicator is the wrong component for this use case — a simpler ActivityIndicator with equivalent styling is the correct approach when navigation controls are already provided by a sibling header.

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

In src/pages/settings/VerifyAccountPageBase.tsx:

1. Remove the FullScreenLoadingIndicator import and add imports for ActivityIndicator, View (from react-native), useTheme, and CONST.

2. Add const theme = useTheme(); in the component body.

3. Replace the FullScreenLoadingIndicator usage at line 84:

   Before: <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />

   After: A View with the equivalent visual styles wrapping a bare ActivityIndicator:

   • The View gets styles.flex1, styles.pRelative, styles.alignItemsCenter, styles.justifyContentCenter, plus inline backgroundColor: theme.componentBG and opacity: 0.8
   • The ActivityIndicator gets size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}

Style equivalence rationale: The current FullScreenLoadingIndicator outer View combines StyleSheet.absoluteFillObject, styles.fullScreenLoading (componentBG background, 0.8 opacity, centered, zIndex 10), styles.w100, and the passed [styles.flex1, styles.pRelative]. Since pRelative overrides absolute positioning, and flex: 1 fills the remaining space, the absolute fill properties and w100/zIndex become irrelevant. The visually significant styles are: flex: 1, position: relative, backgroundColor: componentBG, opacity: 0.8, justifyContent: center, alignItems: center — all reproduced in the replacement View. The inner <View style={styles.w100}> wrapper from FullScreenLoadingIndicator is unnecessary since it only constrains the Go Back button area, which doesn't exist here.

What alternative solutions did you explore? (Optional)

Passing a prop to FullScreenLoadingIndicator to disable the Go Back button was considered, but the issue description explicitly calls for replacing with ActivityIndicator since this is a case where the fullscreen loading component is fundamentally unnecessary — the navigation header already handles the "escape" affordance.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[situchan]

👋

[melvin-bot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.