From d974793b5952fe9c5ead7411a860eef04038529e Mon Sep 17 00:00:00 2001
From: Christoph Nakazawa <cpojer@fb.com>
Date: Thu, 18 Jul 2019 02:59:15 -0700
Subject: [PATCH] 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           | 2 +-
 Libraries/Utilities/LoadingView.android.js | 2 +-
 Libraries/Utilities/LoadingView.ios.js     | 6 ++++--
 Libraries/Utilities/LoadingView.js         | 2 +-
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/Libraries/Utilities/HMRClient.js b/Libraries/Utilities/HMRClient.js
index ca3f38e06d..24f568ebd2 100644
--- a/Libraries/Utilities/HMRClient.js
+++ b/Libraries/Utilities/HMRClient.js
@@ -172,7 +172,7 @@ Error: ${e.message}`;
 
     client.on('update-start', () => {
       if (isFastRefreshActive()) {
-        LoadingView.showMessage('Refreshing...');
+        LoadingView.showMessage('Refreshing...', 'refresh');
       }
     });
 
diff --git a/Libraries/Utilities/LoadingView.android.js b/Libraries/Utilities/LoadingView.android.js
index 04fc973c31..3b9511f52a 100644
--- a/Libraries/Utilities/LoadingView.android.js
+++ b/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;
diff --git a/Libraries/Utilities/LoadingView.ios.js b/Libraries/Utilities/LoadingView.ios.js
index caf499aa4d..782bedfbbb 100644
--- a/Libraries/Utilities/LoadingView.ios.js
+++ b/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'),
       );
     }
   },
diff --git a/Libraries/Utilities/LoadingView.js b/Libraries/Utilities/LoadingView.js
index cc14be3be6..2a02730fc5 100644
--- a/Libraries/Utilities/LoadingView.js
+++ b/Libraries/Utilities/LoadingView.js
@@ -11,6 +11,6 @@
 'use strict';
 
 module.exports = {
-  showMessage(message: string) {},
+  showMessage(message: string, type: 'load' | 'refresh') {},
   hide() {},
 };