Fix browser initial loading performance (#1568)

* Fix browser initial loading performance

* Update test

Co-authored-by: Ibrahim Taveras <ibrahimtaveras00@gmail.com>

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 {

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();
 	};
 

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 = () => (

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;