[P2P Statements] Add Loading Indicator

src/components/WalletStatementModal/index.js

@@ -1,24 +1,45 @@
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
+import {View} from 'react-native';
 import compose from '../../libs/compose';
 import withLocalize from '../withLocalize';
 import ONYXKEYS from '../../ONYXKEYS';
 import {walletStatementPropTypes, walletStatementDefaultProps} from './WalletStatementModalPropTypes';
+import styles from '../../styles/styles';
+import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
 
-const WalletStatementModal = (props) => {
-    const authToken = lodashGet(props, 'session.authToken', null);
-    return (
-        <iframe
-            src={`${props.statementPageURL}&authToken=${authToken}`}
-            title="Statements"
-            height="100%"
-            width="100%"
-            seamless="seamless"
-            frameBorder="0"
-        />
-    );
-};
+class WalletStatementModal extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isLoading: true,
+        };
+    }
+
+    render() {
+        const authToken = lodashGet(this.props, 'session.authToken', null);
+        return (
+            <>
+                <FullScreenLoadingIndicator
+                    visible={this.state.isLoading}
+                />
+                <View style={[styles.flex1]}>
+                    <iframe
+                        src={`${this.props.statementPageURL}&authToken=${authToken}`}
+                        title="Statements"
+                        height="100%"
+                        width="100%"
+                        seamless="seamless"
+                        frameBorder="0"
+                        onLoad={() => this.setState({isLoading: false})}
+                    />
+                </View>
+            </>
+        );
+    }
+}
 
 WalletStatementModal.propTypes = walletStatementPropTypes;
 WalletStatementModal.defaultProps = walletStatementDefaultProps;

src/components/WalletStatementModal/index.native.js

@@ -6,6 +6,7 @@ import withLocalize from '../withLocalize';
 import ONYXKEYS from '../../ONYXKEYS';
 import compose from '../../libs/compose';
 import {walletStatementPropTypes, walletStatementDefaultProps} from './WalletStatementModalPropTypes';
+import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
 
 const WalletStatementModal = (props) => {
     const authToken = lodashGet(props, 'session.authToken', null);
@@ -19,6 +20,8 @@ const WalletStatementModal = (props) => {
                 },
             }}
             incognito // 'incognito' prop required for Android, issue here https://github.com/react-native-webview/react-native-webview/issues/1352
+            startInLoadingState
+            renderLoading={() => <FullScreenLoadingIndicator />}
         />
     );
 };