Skip to content

Commit

Permalink
Update loading banner text and colors
Browse files Browse the repository at this point in the history
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
  • Loading branch information
rickhanlonii authored and facebook-github-bot committed Apr 29, 2020
1 parent 9699933 commit 3729fe8
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 14 deletions.
13 changes: 6 additions & 7 deletions Libraries/Utilities/LoadingView.ios.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
);
}
Expand Down
8 changes: 5 additions & 3 deletions React/Base/RCTJavaScriptLoader.mm
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
7 changes: 3 additions & 4 deletions React/CoreModules/RCTDevLoadingView.mm
Original file line number Diff line number Diff line change
Expand Up @@ -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];
}

Expand Down

0 comments on commit 3729fe8

Please sign in to comment.