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

@@ -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,
       );
     }

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;

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];
 }