Add a loading bar when loading split bundles

Summary:
This adds a loading indicator when loading split bundles so that users get a visual indicator about what is going on.

Note that I am currently trying to get the dynamic message that shows the number of modules and percentage to work but it appears that the JavaScript networking client (XMLHttpRequest + RCTNetwork) are not set up to deal with multipart responses in the same way as our native multipart handlers are. I'd like to put this in place now and polish it later if it's possible to fix the issue (I spent all afternoon yesterday trying to make multipart messages work and failed :( ).

Reviewed By: gaearon

Differential Revision: D16281531

fbshipit-source-id: 84e53d7f25642398ed51d8f552919880b8090897

Libraries/Utilities/HMRClient.js

@@ -172,7 +172,7 @@ Error: ${e.message}`;
 
     client.on('update-start', () => {
       if (isFastRefreshActive()) {
-        LoadingView.showMessage('Refreshing...');
+        LoadingView.showMessage('Refreshing...', 'refresh');
       }
     });
 

Libraries/Utilities/LoadingView.android.js

@@ -16,7 +16,7 @@ const TOAST_SHORT_DELAY = 2000;
 let isVisible = false;
 
 module.exports = {
-  showMessage(message: string) {
+  showMessage(message: string, type: 'load' | 'refresh') {
     if (!isVisible) {
       ToastAndroid.show(message, ToastAndroid.SHORT);
       isVisible = true;

Libraries/Utilities/LoadingView.ios.js

@@ -14,13 +14,15 @@ import processColor from '../StyleSheet/processColor';
 import NativeDevLoadingView from './NativeDevLoadingView';
 
 module.exports = {
-  showMessage(message: string) {
+  showMessage(message: string, type: 'load' | 'refresh') {
     if (NativeDevLoadingView) {
       NativeDevLoadingView.showMessage(
         message,
         // Use same colors as iOS "Personal Hotspot" bar.
         processColor('#ffffff'),
-        processColor('#2584e8'),
+        type && type === 'load'
+          ? processColor('#275714')
+          : processColor('#2584e8'),
       );
     }
   },

Libraries/Utilities/LoadingView.js

@@ -11,6 +11,6 @@
 'use strict';
 
 module.exports = {
-  showMessage(message: string) {},
+  showMessage(message: string, type: 'load' | 'refresh') {},
   hide() {},
 };