Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add loading view to notification.html #6648

Merged
merged 1 commit into from
Jun 19, 2019

Conversation

chikeichan
Copy link
Contributor

This PR adds a initial loading screen to the raw html file - this will allow the loading screen to be painted almost instantaneous, giving user feedback that something is happening instead of a blank screen. This relates to #6590

Here is some research into the issue (on a 2017 MBP) on current production build 6.5.3:

  • Time to First Paint: ~2s
  • Time to Content Loaded: ~1.5s

I have created issues #6644, #6645, #6646 , #6647 to capture the rest of the work toward optimizing load time.

instant-load-screen

@chikeichan chikeichan requested a review from cjeria May 23, 2019 06:21
@chikeichan
Copy link
Contributor Author

@cjeria - can you comment on my design for the loading screen? 😃

<div id="app-content"></div>
<div id="app-content">
<img id="loading__logo" src="./images/logo/metamask-fox.svg" />
<img id="loading__spinner" src="./images/spinner.gif" />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It has to be a gif because scripting time actually blocks css animations too.

@cjeria
Copy link
Contributor

cjeria commented Jun 4, 2019

What you've put together looks perfectly fine. I'm noticing however there are two different loading indicator versions in your example gif. Let's use just one for consistency and make it gray #bbc0c5.

This one...
image

And this one that appears for a split second after the signing...
image

I'll leave it up to you to choose which one to use.

@chikeichan

@cjeria
Copy link
Contributor

cjeria commented Jun 5, 2019

I'll provide a GIF of the second loading indicator since the loading screen can only use GIF, no code version of a loading indicator.

@danjm danjm self-assigned this Jun 17, 2019
@chikeichan chikeichan merged commit a257a73 into MetaMask:develop Jun 19, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants