Replace FullscreenLoadingIndicator with ActivityIndicator in WalletStatementModal

src/components/WalletStatementModal/index.native.tsx

@@ -1,11 +1,13 @@
 import {hasSeenTourSelector} from '@selectors/Onboarding';
 import React, {useCallback, useRef} from 'react';
+import {StyleSheet, View} from 'react-native';
 import type {WebViewMessageEvent, WebViewNavigation} from 'react-native-webview';
 import {WebView} from 'react-native-webview';
 import type {ValueOf} from 'type-fest';
-import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import ActivityIndicator from '@components/ActivityIndicator';
 import useOnyx from '@hooks/useOnyx';
-import type CONST from '@src/CONST';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {WalletStatementProps} from './types';
 import handleWalletStatementNavigation from './walletNavigationUtils';
@@ -14,13 +16,26 @@ type WebViewMessageType = ValueOf<typeof CONST.WALLET.WEB_MESSAGE_TYPE>;
 
 type WebViewNavigationEvent = WebViewNavigation & {type?: WebViewMessageType};
 
-const renderLoading = () => <FullScreenLoadingIndicator reasonAttributes={{context: 'WalletStatementModal'}} />;
-
 function WalletStatementModal({statementPageURL}: WalletStatementProps) {
+    const styles = useThemeStyles();
     const [session] = useOnyx(ONYXKEYS.SESSION);
     const webViewRef = useRef<WebView>(null);
     const authToken = session?.authToken ?? null;
 
+    const renderLoading = useCallback(
+        () => (
+            <View style={[StyleSheet.absoluteFill, styles.fullScreenLoading, styles.w100]}>
+                <View style={styles.w100}>
+                    <ActivityIndicator
+                        size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
+                        reasonAttributes={{context: 'WalletStatementModal'}}
+                    />
+                </View>
+            </View>
+        ),
+        [styles.fullScreenLoading, styles.w100],
+    );
+
     const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
     const [isSelfTourViewed] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {selector: hasSeenTourSelector});

src/components/WalletStatementModal/index.tsx

@@ -1,9 +1,10 @@
 import {hasSeenTourSelector} from '@selectors/Onboarding';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {View} from 'react-native';
-import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import {StyleSheet, View} from 'react-native';
+import ActivityIndicator from '@components/ActivityIndicator';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {WalletStatementMessage, WalletStatementProps} from './types';
 import handleWalletStatementNavigation from './walletNavigationUtils';
@@ -38,7 +39,14 @@ function WalletStatementModal({statementPageURL}: WalletStatementProps) {
 
     return (
         <>
-            {isLoading && <FullScreenLoadingIndicator reasonAttributes={{context: 'WalletStatementModal'}} />}
+            {isLoading && (
+                <View style={[StyleSheet.absoluteFill, styles.fullScreenLoading, styles.w100]}>
+                    <ActivityIndicator
+                        size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
+                        reasonAttributes={{context: 'WalletStatementModal'}}
+                    />
+                </View>
+            )}
             <View style={[styles.flex1]}>
                 <iframe
                     src={`${statementPageURL}&authToken=${authToken}`}