From 3729fe8de0109c80014f6c20fae8b949b3628de2 Mon Sep 17 00:00:00 2001
From: Rick Hanlon <rickhanlonii@fb.com>
Date: Tue, 28 Apr 2020 23:16:58 -0700
Subject: [PATCH] Update loading banner text and colors

Summary:
This diff updates the loading banner text and color on iOS for better UX.

Flow before:
- Loading from localhost:8081...
- Loading 20% (1000/5000)...
- Downloading JavaScript Bundle 20% (10/50)
- Downloading JavaScript Bundle...

After:
- Loading from Metro...
- Bundling 20%...
- Downloading 20%...
- Downloading...

Changelog: [Added] [iOS] Updated loading banner messages and color

Reviewed By: PeteTheHeat

Differential Revision: D21279939

fbshipit-source-id: fd7d90f85e25ce175a87087dfccf2180d49e3e98
---
 Libraries/Utilities/LoadingView.ios.js | 13 ++++++-------
 React/Base/RCTJavaScriptLoader.mm      |  8 +++++---
 React/CoreModules/RCTDevLoadingView.mm |  7 +++----
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/Libraries/Utilities/LoadingView.ios.js b/Libraries/Utilities/LoadingView.ios.js
index e8f7d133f5caf3..ad2caad48310ea 100644
--- a/Libraries/Utilities/LoadingView.ios.js
+++ b/Libraries/Utilities/LoadingView.ios.js
@@ -16,20 +16,19 @@ import NativeDevLoadingView from './NativeDevLoadingView';
 module.exports = {
   showMessage(message: string, type: 'load' | 'refresh') {
     if (NativeDevLoadingView) {
-      const green = processColor('#005a00');
-      const blue = processColor('#2584e8');
+      const loadColor = processColor('#404040');
+      const refreshColor = processColor('#2584e8');
       const white = processColor('#ffffff');
 
       NativeDevLoadingView.showMessage(
         message,
-        // Use same colors as iOS "Personal Hotspot" bar.
         typeof white === 'number' ? white : null,
         type && type === 'load'
-          ? typeof green === 'number'
-            ? green
+          ? typeof loadColor === 'number'
+            ? loadColor
             : null
-          : typeof blue === 'number'
-          ? blue
+          : typeof refreshColor === 'number'
+          ? refreshColor
           : null,
       );
     }
diff --git a/React/Base/RCTJavaScriptLoader.mm b/React/Base/RCTJavaScriptLoader.mm
index 8c8e5fad02ff17..ce347a26ff8759 100755
--- a/React/Base/RCTJavaScriptLoader.mm
+++ b/React/Base/RCTJavaScriptLoader.mm
@@ -50,10 +50,12 @@ @implementation RCTLoadingProgress
 - (NSString *)description
 {
   NSMutableString *desc = [NSMutableString new];
-  [desc appendString:_status ?: @"Loading"];
+  [desc appendString:_status ?: @"Bundling"];
 
   if ([_total integerValue] > 0) {
-    [desc appendFormat:@" %ld%% (%@/%@)", (long)(100 * [_done integerValue] / [_total integerValue]), _done, _total];
+    [desc appendFormat:@" %ld%%", (long)(100 * [_done integerValue] / [_total integerValue])];
+  } else {
+    [desc appendFormat:@" %ld%%", (long)0];
   }
   [desc appendString:@"\u2026"];
   return desc;
@@ -346,7 +348,7 @@ static void attemptAsynchronousLoadOfBundleAtURL(
 static RCTLoadingProgress *progressEventFromDownloadProgress(NSNumber *total, NSNumber *done)
 {
   RCTLoadingProgress *progress = [RCTLoadingProgress new];
-  progress.status = @"Downloading JavaScript bundle";
+  progress.status = @"Downloading";
   // Progress values are in bytes transform them to kilobytes for smaller numbers.
   progress.done = done != nil ? @([done integerValue] / 1024) : nil;
   progress.total = total != nil ? @([total integerValue] / 1024) : nil;
diff --git a/React/CoreModules/RCTDevLoadingView.mm b/React/CoreModules/RCTDevLoadingView.mm
index a17614e87d77fe..9a4c4453d7bf40 100644
--- a/React/CoreModules/RCTDevLoadingView.mm
+++ b/React/CoreModules/RCTDevLoadingView.mm
@@ -188,14 +188,13 @@ - (void)showWithURL:(NSURL *)URL
     return;
 #endif
     color = [UIColor whiteColor];
-    backgroundColor = [UIColor blackColor];
+    backgroundColor = [UIColor colorWithHue:105 saturation:0 brightness:.25 alpha:1];
     message = [NSString stringWithFormat:@"Connect to %@ to develop JavaScript.", RCT_PACKAGER_NAME];
   } else {
     color = [UIColor whiteColor];
-    backgroundColor = [UIColor colorWithHue:1. / 3 saturation:1 brightness:.35 alpha:1];
-    message = [NSString stringWithFormat:@"Loading from %@:%@...", URL.host, URL.port];
+    backgroundColor = [UIColor colorWithHue:105 saturation:0 brightness:.25 alpha:1];
+    message = [NSString stringWithFormat:@"Loading from %@\u2026", RCT_PACKAGER_NAME];
   }
-
   [self showMessage:message color:color backgroundColor:backgroundColor];
 }