Merge pull request Expensify#88739 from Expensify/claude-useActivityIndicatorInWalletStatementModal

Replace FullscreenLoadingIndicator with ActivityIndicator in WalletStatementModal

Author: Julesssss

src/components/WalletStatementModal/index.native.tsx

@@ -1,11 +1,13 @@
 import {hasSeenTourSelector} from '@selectors/Onboarding';
 import React, {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,9 +16,8 @@ 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 [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
@@ -27,6 +28,15 @@ function WalletStatementModal({statementPageURL}: WalletStatementProps) {
 
     const authToken = session?.authToken ?? null;
 
+    const renderLoading = () => (
+        <View style={[StyleSheet.absoluteFill, styles.fullScreenLoading]}>
+            <ActivityIndicator
+                size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
+                reasonAttributes={{context: 'WalletStatementModal'}}
+            />
+        </View>
+    );
+
     const onMessage = (event: WebViewMessageEvent) => {
         let parsedData: WebViewNavigationEvent | null = null;
         try {

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';
@@ -37,26 +38,33 @@ function WalletStatementModal({statementPageURL}: WalletStatementProps) {
     }, [navigate]);
 
     return (
-        <>
-            {isLoading && <FullScreenLoadingIndicator reasonAttributes={{context: 'WalletStatementModal'}} />}
-            <View style={[styles.flex1]}>
-                <iframe
-                    src={`${statementPageURL}&authToken=${authToken}`}
-                    title="Statements"
-                    height="100%"
-                    width="100%"
-                    seamless
-                    frameBorder="0"
-                    onLoad={() => {
-                        setIsLoading(false);
+        <View style={styles.flex1}>
+            {isLoading && (
+                <View style={[StyleSheet.absoluteFill, styles.fullScreenLoading]}>
+                    <ActivityIndicator
+                        size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
+                        reasonAttributes={{context: 'WalletStatementModal'}}
+                    />
+                </View>
+            )}
+            <iframe
+                src={`${statementPageURL}&authToken=${authToken}`}
+                title="Statements"
+                height="100%"
+                width="100%"
+                seamless
+                // frameBorder is deprecated in HTML5 but needed for consistent cross-browser iframe border removal
+                // eslint-disable-next-line @typescript-eslint/no-deprecated
+                frameBorder="0"
+                onLoad={() => {
+                    setIsLoading(false);
 
-                        // We listen to a message sent from the iframe to the parent component when a link is clicked.
-                        // This lets us handle navigation in the app, outside of the iframe.
-                        window.onmessage = (event: MessageEvent<WalletStatementMessage>) => navigateRef.current?.(event);
-                    }}
-                />
-            </View>
-        </>
+                    // We listen to a message sent from the iframe to the parent component when a link is clicked.
+                    // This lets us handle navigation in the app, outside of the iframe.
+                    window.onmessage = (event: MessageEvent<WalletStatementMessage>) => navigateRef.current?.(event);
+                }}
+            />
+        </View>
     );
 }