[Due for payment 2026-03-30] [$125] Use valid loading indicator in `PhoneNumberPage.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).

PhoneNumberPage.tsx renders HeaderWithBackButton and FullscreenLoadingIndicator as siblings inside ScreenWrapper. When isLoadingApp is true, the header back button is always visible, so the user can already navigate away. FullscreenLoadingIndicator is unnecessary here and should be replaced with a plain ActivityIndicator.

Solution

Replace FullscreenLoadingIndicator with ActivityIndicator in src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.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: @mateuuszzzzz

[MelvinBot]

Proposal

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

PhoneNumberPage.tsx renders HeaderWithBackButton and FullscreenLoadingIndicator as siblings inside ScreenWrapper. As part of the loading indicator standardization (#69850), shouldUseGoBackButton will be enabled by default in FullscreenLoadingIndicator, which would result in users seeing two back controls (the header back button AND the Go Back button from the loader). We need to replace FullscreenLoadingIndicator with a plain ActivityIndicator wrapped in a styled View to avoid the conflict while keeping the visual appearance identical.

What is the root cause of that problem?

FullscreenLoadingIndicator is a full-overlay component that will soon include its own navigation control. Using it alongside HeaderWithBackButton creates a duplicate navigation affordance. The component is overkill here — only a centered spinner is needed since the header already provides navigation.

In PhoneNumberPage.tsx at line 88, the current code renders:

<FullscreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />

The FullscreenLoadingIndicator component (source) wraps ActivityIndicator in a View that applies fullScreenLoading styles: backgroundColor: theme.componentBG, opacity: 0.8, justifyContent: 'center', alignItems: 'center', plus zIndex: 10. The caller's [styles.flex1, styles.pRelative] overrides the absolute positioning to relative, making the container fill the available space below the header.

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

In src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx:

1. Replace the FullscreenLoadingIndicator import with imports for ActivityIndicator (from @components/ActivityIndicator) and View (from react-native)
2. Replace the <FullscreenLoadingIndicator style={[styles.flex1, styles.pRelative]} /> with a View wrapping an ActivityIndicator:
   • The View should carry [styles.flex1, styles.pRelative, styles.justifyContentCenter, styles.alignItemsCenter] plus the background color (theme.componentBG) and opacity (0.8) to match the current visual
   • The ActivityIndicator should use size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE} to match the current large spinner
3. Add useTheme hook usage to access theme.componentBG for the background color

This follows the same pattern already applied in ProfilePage.tsx at lines 265-271, which replaced FullscreenLoadingIndicator with View + ActivityIndicator in the same isLoadingApp guard.

What alternative solutions did you explore? (Optional)

Using ActivityIndicator without a wrapper View was considered, but the codebase convention is to wrap it in a parent View that provides layout and background styling since ActivityIndicator is a raw spinner with no layout or background styling on its own. The ProfilePage.tsx replacement confirms this pattern.

---

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.