From f1bb1aebd21d6e520b276a2ae40c465e62184153 Mon Sep 17 00:00:00 2001
From: Andre Pimenta <andrepimenta7@gmail.com>
Date: Thu, 28 May 2020 12:21:36 +0100
Subject: [PATCH] Fix browser initial loading performance (#1568)

* Fix browser initial loading performance

* Update test

Co-authored-by: Ibrahim Taveras <ibrahimtaveras00@gmail.com>
---
 .../__snapshots__/index.test.js.snap          | 40 ++++++++++++++++++-
 app/components/Views/BrowserTab/index.js      | 19 ++++++---
 app/components/Views/Root/index.js            |  3 ++
 app/core/EntryScriptWeb3.js                   | 23 +++++++++++
 4 files changed, 78 insertions(+), 7 deletions(-)
 create mode 100644 app/core/EntryScriptWeb3.js

diff --git a/app/components/Views/BrowserTab/__snapshots__/index.test.js.snap b/app/components/Views/BrowserTab/__snapshots__/index.test.js.snap
index c0122cda94f..a282f7539f6 100644
--- a/app/components/Views/BrowserTab/__snapshots__/index.test.js.snap
+++ b/app/components/Views/BrowserTab/__snapshots__/index.test.js.snap
@@ -19,7 +19,45 @@ exports[`Browser should render correctly 1`] = `
         "zIndex": 1,
       }
     }
-  />
+  >
+    <WebView
+      allowsInlineMediaPlayback={true}
+      cacheEnabled={true}
+      injectedJavaScript={null}
+      javaScriptEnabled={true}
+      javascriptEnabled={true}
+      onError={[Function]}
+      onLoadEnd={[Function]}
+      onLoadProgress={[Function]}
+      onLoadStart={[Function]}
+      onMessage={[Function]}
+      onNavigationStateChange={[Function]}
+      onShouldStartLoadWithRequest={[Function]}
+      originWhitelist={
+        Array [
+          "http://*",
+          "https://*",
+        ]
+      }
+      renderError={[Function]}
+      sendCookies={true}
+      source={
+        Object {
+          "uri": null,
+        }
+      }
+      style={
+        Object {
+          "flex": 1,
+          "zIndex": 1,
+        }
+      }
+      testID="browser-webview"
+      useSharedProcessPool={true}
+      useWebkit={true}
+      userAgent="Mozilla/5.0 (iPhone; CPU iPhone OS 13_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/76.0.3809.123 Mobile/15E148 Safari/605.1"
+    />
+  </View>
   <View
     style={
       Object {
diff --git a/app/components/Views/BrowserTab/index.js b/app/components/Views/BrowserTab/index.js
index 6bb7b2a2a93..290e0ec9324 100644
--- a/app/components/Views/BrowserTab/index.js
+++ b/app/components/Views/BrowserTab/index.js
@@ -21,7 +21,6 @@ import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import BrowserBottomBar from '../../UI/BrowserBottomBar';
 import PropTypes from 'prop-types';
-import RNFS from 'react-native-fs';
 import Share from 'react-native-share'; // eslint-disable-line  import/default
 import { connect } from 'react-redux';
 import BackgroundBridge from '../../../core/BackgroundBridge';
@@ -62,6 +61,8 @@ import { resemblesAddress } from '../../../util/address';
 import createAsyncMiddleware from 'json-rpc-engine/src/createAsyncMiddleware';
 import { ethErrors } from 'eth-json-rpc-errors';
 
+import EntryScriptWeb3 from '../../../core/EntryScriptWeb3';
+
 const { HOMEPAGE_URL, USER_AGENT, NOTIFICATION_NAMES } = AppConstants;
 const HOMEPAGE_HOST = 'home.metamask.io';
 
@@ -734,9 +735,7 @@ export class BrowserTab extends PureComponent {
 		});
 
 	init = async () => {
-		const entryScriptWeb3 = Device.isIos()
-			? await RNFS.readFile(`${RNFS.MainBundlePath}/InpageBridgeWeb3.js`, 'utf8')
-			: await RNFS.readFileAssets(`InpageBridgeWeb3.js`);
+		const entryScriptWeb3 = await EntryScriptWeb3.get();
 
 		const analyticsEnabled = Analytics.getEnabled();
 
@@ -1137,13 +1136,21 @@ export class BrowserTab extends PureComponent {
 		current && current.reload();
 	};
 
-	forceReload = () => {
+	forceReload = initialReload => {
 		this.isReloading = true;
 
 		this.toggleOptionsIfNeeded();
 		// As we're reloading to other url we should remove this callback
 		this.approvalRequest = undefined;
 		const url2Reload = this.state.inputValue;
+
+		// If it is the first time the component is being mounted, there should be no cache problem and no need for remounting the component
+		if (initialReload) {
+			this.isReloading = false;
+			this.go(url2Reload);
+			return;
+		}
+
 		// Force unmount the webview to avoid caching problems
 		this.setState({ forceReload: true }, () => {
 			// Make sure we're not calling last mounted webview during this time threshold
@@ -1161,7 +1168,7 @@ export class BrowserTab extends PureComponent {
 		if (this.webview && this.webview.current) {
 			this.webview.current.stopLoading();
 		}
-		this.forceReload();
+		this.forceReload(true);
 		this.init();
 	};
 
diff --git a/app/components/Views/Root/index.js b/app/components/Views/Root/index.js
index 9f8c9dfe1f0..5d69869d6ed 100644
--- a/app/components/Views/Root/index.js
+++ b/app/components/Views/Root/index.js
@@ -6,6 +6,7 @@ import { store, persistor } from '../../../store/';
 
 import App from '../../Nav/App';
 import SecureKeychain from '../../../core/SecureKeychain';
+import EntryScriptWeb3 from '../../../core/EntryScriptWeb3';
 
 /**
  * Top level of the component hierarchy
@@ -15,6 +16,8 @@ export default class Root extends PureComponent {
 	constructor(props) {
 		super(props);
 		SecureKeychain.init(props.foxCode); // eslint-disable-line
+		// Init EntryScriptWeb3 asynchronously on the background
+		EntryScriptWeb3.init();
 	}
 
 	render = () => (
diff --git a/app/core/EntryScriptWeb3.js b/app/core/EntryScriptWeb3.js
new file mode 100644
index 00000000000..ca5dc489c1a
--- /dev/null
+++ b/app/core/EntryScriptWeb3.js
@@ -0,0 +1,23 @@
+import Device from '../util/Device';
+import RNFS from 'react-native-fs';
+
+const EntryScriptWeb3 = {
+	entryScriptWeb3: null,
+	// Cache InpageBridgeWeb3 so that it is immediately available
+	async init() {
+		this.entryScriptWeb3 = Device.isIos()
+			? await RNFS.readFile(`${RNFS.MainBundlePath}/InpageBridgeWeb3.js`, 'utf8')
+			: await RNFS.readFileAssets(`InpageBridgeWeb3.js`);
+
+		return this.entryScriptWeb3;
+	},
+	async get() {
+		// Return from cache
+		if (this.entryScriptWeb3) return this.entryScriptWeb3;
+
+		// If for some reason it is not available, get it again
+		return await this.init();
+	}
+};
+
+export default EntryScriptWeb3;