Improve reinstall loading screen status message UI

[melanieseltzer]

Related Issue/PR

278 / #318

The reinstall feature added in the above PR has added the ability to detect when node_modules is missing, and to trigger a reinstall of dependencies from click of a button.

While the reinstall is happening, the standard loading screen is on the screen. The PR also adds a progress bar. There is also a message feature that was added, but this will be commented out until we can come up with a better solution for the UI.

The message looked like this, originally:

User clicks info icon to trigger message:

The main problem with this is the messages are flashing too quickly for the user to see, before they can click the info icon to open it up. So the solution should be come up with a nice UI to incorporate these messages.

I did a quick pass in Photoshop for an idea based on this Dribbble but I'm sure it can be improved.

But if anyone has any other ideas please feel free to suggest.

[joao-alberto]

@melanieseltzer is someone working in this issue? I can do that

[melanieseltzer]

@joao-alberto, it's all yours! A couple things to note are that the PR (#318) is actually not merged yet, so you'll need to base your branch off reinstall branch, if you'll be working in the codebase for UI changes.

If you need to trigger the UI to show the loading screen/progress bar while you work, you can input some hard values like isVisible={true} and progress={somevalue} like so:

// components/LoadingScreen/LoadingScreen.js

...
<Window isVisible={true}>
  <ProgressBarWrapper>
    <ProgressBar progress={0.75} reset={this.state.reset} />
...

And finally, I think I remember that we decided not to show a percentage value to the user, which isn't reflected in my Photoshop mockup (there's a 75% value underneath progress bar). So you can ignore that value.

Let me know if you have any other questions!

[joao-alberto]

@melanieseltzer Tks for tips, I'll start now

[melanieseltzer]

Closed via #349