Skip to content

Commit 4e1fe96

Browse files
MelvinBotsituchan
andcommitted
Replace FullscreenLoadingIndicator with ActivityIndicator in PhoneNumberPage
PhoneNumberPage renders HeaderWithBackButton and FullscreenLoadingIndicator as siblings. When shouldUseGoBackButton becomes the default, users would see two back controls. Replace with View + ActivityIndicator to avoid the conflict while preserving the same visual appearance. Co-authored-by: Situ Chandra Shil <situchan@users.noreply.github.com>
1 parent b8f9a32 commit 4e1fe96

1 file changed

Lines changed: 12 additions & 5 deletions

File tree

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

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
import React, {useCallback} from 'react';
2+
import {View} from 'react-native';
3+
import ActivityIndicator from '@components/ActivityIndicator';
24
import DelegateNoAccessWrapper from '@components/DelegateNoAccessWrapper';
35
import FormProvider from '@components/Form/FormProvider';
46
import InputWrapper from '@components/Form/InputWrapper';
57
import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
6-
import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
78
import HeaderWithBackButton from '@components/HeaderWithBackButton';
89
import OfflineWithFeedback from '@components/OfflineWithFeedback';
910
import ScreenWrapper from '@components/ScreenWrapper';
1011
import TextInput from '@components/TextInput';
1112
import useAutoFocusInput from '@hooks/useAutoFocusInput';
1213
import useLocalize from '@hooks/useLocalize';
1314
import useOnyx from '@hooks/useOnyx';
15+
import useStyleUtils from '@hooks/useStyleUtils';
16+
import useTheme from '@hooks/useTheme';
1417
import useThemeStyles from '@hooks/useThemeStyles';
1518
import {getEarliestErrorField} from '@libs/ErrorUtils';
1619
import {appendCountryCode, formatE164PhoneNumber} from '@libs/LoginUtils';
@@ -28,6 +31,8 @@ function PhoneNumberPage() {
2831
const [isLoadingApp = true] = useOnyx(ONYXKEYS.IS_LOADING_APP);
2932
const [countryCode = CONST.DEFAULT_COUNTRY_CODE] = useOnyx(ONYXKEYS.COUNTRY_CODE);
3033
const styles = useThemeStyles();
34+
const StyleUtils = useStyleUtils();
35+
const theme = useTheme();
3136
const {translate} = useLocalize();
3237
const {inputCallbackRef} = useAutoFocusInput();
3338
const phoneNumber = privatePersonalDetails?.phoneNumber ?? '';
@@ -87,10 +92,12 @@ function PhoneNumberPage() {
8792
onBackButtonPress={() => Navigation.goBack()}
8893
/>
8994
{isLoadingApp ? (
90-
<FullscreenLoadingIndicator
91-
style={[styles.flex1, styles.pRelative]}
92-
reasonAttributes={{context: 'PhoneNumberPage', isLoadingApp} satisfies SkeletonSpanReasonAttributes}
93-
/>
95+
<View style={[styles.flex1, styles.pRelative, styles.justifyContentCenter, styles.alignItemsCenter, StyleUtils.getBackgroundColorStyle(theme.componentBG), {opacity: 0.8}]}>
96+
<ActivityIndicator
97+
size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
98+
reasonAttributes={{context: 'PhoneNumberPage', isLoadingApp} satisfies SkeletonSpanReasonAttributes}
99+
/>
100+
</View>
94101
) : (
95102
<FormProvider
96103
style={[styles.flexGrow1, styles.ph5]}

0 commit comments

Comments
 (0)