diff --git a/src/components/WalletStatementModal/index.native.tsx b/src/components/WalletStatementModal/index.native.tsx index 4e41356c70d7..50426a9b32fe 100644 --- a/src/components/WalletStatementModal/index.native.tsx +++ b/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; type WebViewNavigationEvent = WebViewNavigation & {type?: WebViewMessageType}; -const renderLoading = () => ; - function WalletStatementModal({statementPageURL}: WalletStatementProps) { + const styles = useThemeStyles(); const [session] = useOnyx(ONYXKEYS.SESSION); const webViewRef = useRef(null); const authToken = session?.authToken ?? null; + const renderLoading = useCallback( + () => ( + + + + + + ), + [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}); diff --git a/src/components/WalletStatementModal/index.tsx b/src/components/WalletStatementModal/index.tsx index 8e45f9b162d9..36d0bec079d8 100644 --- a/src/components/WalletStatementModal/index.tsx +++ b/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 && } + {isLoading && ( + + + + )}