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.

Sign up for GitHub

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

Jump to bottom

Improve test network loading state indicator #3776

Closed
cjeria opened this issue Mar 28, 2018 · 54 comments · Fixed by #5893
Closed

Improve test network loading state indicator #3776

cjeria opened this issue Mar 28, 2018 · 54 comments · Fixed by #5893
Assignees
@whymarrh @danjm
Labels
area-UI Relating to the user interface. has bounty type-enhancement

Comments

@cjeria
Copy link
Contributor

cjeria commented Mar 28, 2018 •
edited by bdresser
Loading

Bounty: when the extension is trying to connect to a Custom RPC network, we should

(1) update the UI to include the network name next to the small spinner on the top bar of the extension. Current behavior only shows a static spinner graphic, and most users don't know they can click it to escape.

(2) time out the connection attempt if it lasts longer than 15 seconds without connecting successfully. the extension should stop trying to connect and display the screen shown below. The "try again" button should resume attempting to connect to the same network, the "Switch networks" button should pop open the network menu (top-right).

current production:
screen shot 2018-10-12 at 12 04 33 pm

design spec:
(1) top-right network pill is updated, and UI shows the name of network
screen shot 2018-10-12 at 12 39 42 pm

(2) after 15s, modal over whatever previous screen the user was on. network should revert back to whatever the user was previously on if possible.
image

When a user clicks localhost 8545 without anything running on that port, they land on a spinner and think they're frozen. They can actually escape by clicking the small static spinner icon next to the top-right account menu, but few people realize this.

User feedback video showing the problem https://www.youtube.com/watch?v=Veeel3nUtbc
@cjeria cjeria added the area-UI Relating to the user interface. label Mar 28, 2018
@bdresser bdresser mentioned this issue Jun 6, 2018
Closed
@bdresser
Copy link
Contributor

@danjm @alextsg spinner q's come up a lot, i think this small UI tweak to persist the network name while loading would make things a bit easier on folks. marking as P2, feel free to edit.

relates to #4479

@bdresser bdresser changed the title Test Network Infinite Loading State Indicators Improve test network loading state indicator Aug 9, 2018
@gitcoinbot
Copy link

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

This issue now has a funding of 0.1 ETH (35.56 USD @ $355.62/ETH) attached to it.

@cjeria
Copy link
Contributor Author

cjeria commented Aug 9, 2018

This issue has been reported many times and a simple yet effective solution would be to timeout the spinner after a ~20 seconds and throw a message like “Something went wrong, please try switching networks or try again” with a "try again" button.

@gitcoinbot
Copy link

Issue Status: 1. Open 2. Cancelled

The funding of 0.1 ETH (35.56 USD @ $355.62/ETH) attached to this issue has been cancelled by the bounty submitter

@cjeria
Copy link
Contributor Author

cjeria commented Aug 9, 2018

Here's a mockup of the suggest timeout screen with updates per @bdresser suggestion to add a "switch network" button that pops open the network drop down.

image

@ebaizel
Copy link

ebaizel commented Aug 9, 2018

i like the proposed design.

i'd like to propose one alternative...what about keeping the drop down displayed and active, and moving the spinner either to the left of it, or removing it completely as there's already a spinner on the main window. then it's very intuitive how to change the network. there may be a reason why the dropdown needs to be disabled, in which case you can ignore this suggestion :)

@bdresser
Copy link
Contributor

bdresser commented Aug 9, 2018

@ebaizel that's a solid idea, but sometimes users try to join a network from the Settings page, rather than the drop-down menu. Using the overlay lets us give the same experience regardless of where the user is coming from.

I'll re-post a bounty on this today with the timeout functionality included.

@gitcoinbot
Copy link

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

This issue now has a funding of 0.3 ETH (109.11 USD @ $363.7/ETH) attached to it.

@gitcoinbot
Copy link

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work has been started.

These users each claimed they can complete the work by 12 months from now.
Please review their action plans below:

  1. iamonuwa has started work.

    Ready to work on this. Will be completed by end of tomorrow

Learn more on the Gitcoin Issue Details page.

@iamonuwa
Copy link

@cjeria @ebaizel @bdresser @johnweldon I've set up the deps but I get this error anytime I run npm start

image

@estebanmino
Copy link
Contributor

Hi @iamonuwa, please try this

  1. Make sure that you have node.js version 8.11.3 and npm version 6.1.0

  2. nvm use (If you don't have nvm please install here)

  3. npm install

  4. npm start

Feel free to ping me when you've done that.

@iamonuwa
Copy link

@estebanmino, I have my npm, nvm to match with the one you listed.

@estebanmino
Copy link
Contributor

perfect, seems to be a node interference, maybe with a local package? In which OS are you working on?

@iamonuwa
Copy link

Ubuntu 16.04 LTS

@iamonuwa
Copy link

@estebanmino are you there?

@estebanmino
Copy link
Contributor

estebanmino commented Aug 13, 2018 •
edited
Loading

Hi @iamonuwa did you try to removing /node_modules and try everything again? Or trying to find any solution with you node configuration? To me it seems like an error of that type.
I'm reading that people with these error solved their issues doing that or finding some conflicting package or versions.

@iamonuwa
Copy link

Alright, @estebanmino thank you. I'll do that

@iamonuwa
Copy link

@bdresser am stopping work here because I can't seem to set up the task on my local environment. With the configurations provided.

@gitcoinbot
Copy link

gitcoinbot commented Aug 20, 2018 •
edited
Loading

Issue Status: 1. Open 2. Cancelled

Work has been started.

These users each claimed they can complete the work by 5 months from now.
Please review their action plans below:

1) oogetyboogety has started work.

I believe this would involve updating the metamask-controller and network-controller to have a loading state that does not time out the loading overlay/screen.

I'll look into this and propose a solution by the next few days.

Learn more on the Gitcoin Issue Details page.

@oogetyboogety
Copy link

Sorry I meant that does time out

@oogetyboogety
Copy link

oogetyboogety commented Aug 20, 2018 •
edited
Loading

Actually this may be easier to do in the ui/app.js. If anyone has any recommendations, I'll use them, otherwise I'll change the network state from loading and just remove the loading overlay after a timeout.

@bdresser
Copy link
Contributor

hey @oogetyboogety this is a production issue affecting users daily, so we need a little more velocity here. Sorry to say I'm going to remove you from the bounty. Feel free to reach out to [email protected] if you have questions or comments and we can chat there.

This is open again - please tag me if you have any questions about the feature.

@gitcoinbot
Copy link

Issue Status: 1. Open 2. Cancelled

The funding of 0.3 ETH (59.24 USD @ $197.48/ETH) attached to this issue has been cancelled by the bounty submitter

@oogetyboogety
Copy link

oogetyboogety commented Oct 12, 2018 •
edited
Loading

@bdresser I spent a few hours on this and I learned in the process. I think changing it to a modal caused all kind of weird behavior for me...sorry to waste time.

Maybe some of the PR can be salvaged by my replacemenT-this one fell down the list because I had some other bounties that were larger and I was more familiar with the codebase on those.

@gitcoinbot
Copy link

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

This issue now has a funding of 0.5 ETH (98.74 USD @ $197.48/ETH) attached to it as part of the MetaMask fund__.__

@bdresser bdresser mentioned this issue Oct 15, 2018
Closed
@gitcoinbot
Copy link

@yjkimjunior Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

  • warning (3 days)
  • escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

1 similar comment
@gitcoinbot
Copy link

@yjkimjunior Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

  • warning (3 days)
  • escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

@bdresser
Copy link
Contributor

Thanks @anukul - let me know if you have any questions!

@gitcoinbot
Copy link

@anukul Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

  • warning (3 days)
  • escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

4 similar comments
@gitcoinbot
Copy link

@anukul Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

  • warning (3 days)
  • escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

@gitcoinbot
Copy link

@anukul Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

  • warning (3 days)
  • escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

@gitcoinbot
Copy link

@anukul Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

  • warning (3 days)
  • escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

@gitcoinbot
Copy link

@anukul Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

  • warning (3 days)
  • escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

@bdresser
Copy link
Contributor

bdresser commented Nov 5, 2018

@anukul are you working on this? if not, I'm going to release the bounty so someone else can pick it up! let me know.

@bdresser bdresser mentioned this issue Nov 5, 2018
Open
@ghost ghost mentioned this issue Nov 6, 2018
Closed
2 tasks
@omnat omnat mentioned this issue Nov 14, 2018
Open
@bdresser
Copy link
Contributor

@nanspro how you doing?

@bdresser
Copy link
Contributor

@nanspro are you still working on this? if not, will release the bounty (again)

@whymarrh whymarrh self-assigned this Nov 26, 2018
@danjm danjm mentioned this issue Dec 8, 2018
Merged
@ghost ghost assigned danjm Dec 8, 2018
@ghost ghost added the in progress label Dec 8, 2018
@bdresser bdresser mentioned this issue Dec 11, 2018
Closed
@ghost ghost removed the in progress label Dec 13, 2018
@oogetyboogety
Copy link

@bdresser Looks like you guys didn't end up going with the modal! Sad to see the requirements change back!

@blackwatertepes
Copy link

Is this issue still open? It's still listed as an open issue on Gitcoin: https://gitcoin.co/issue/MetaMask/metamask-extension/3776/1467

@whymarrh whymarrh mentioned this issue Dec 15, 2018
Closed
@wbt wbt mentioned this issue Apr 10, 2019
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@whymarrh whymarrh

@danjm danjm

Labels
area-UI Relating to the user interface. has bounty type-enhancement
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Loading network screen MetaMask/metamask-extension
10 participants
@blackwatertepes @cjeria @ebaizel @bdresser @whymarrh @oogetyboogety @iamonuwa @danjm @estebanmino @gitcoinbot