user experience improvement: optimistic ui

[nylira]

UI Version: 0.9.3

Description: The block times for gaia-7005 average around 10 seconds. This is a long time for users to wait to receive feedback. Users may wonder if anything is happening after they send some tokens or delegate some steak.

Solution: We need to improve the responsiveness of Voyager by implementing elements of optimistic UIs.

In short, Voyager should not lock up after a user bonds atoms to a validator. Instead, we should instantly update the interface to show that the atoms have bonded and remove the atoms from the user's wallet. We can have a loading icon somewhere in the app to show that the bonding event in happening in the background. Once the bonding event finishes, we notify the user that it's complete.

The same for sending tokens. Once a user hits "Send", the tokens should be removed from his wallet. The transaction history should show that the tokens have been sent. Somewhere in the transaction card, there should be a loading icon showing that the transaction is in progress. It can change to a green checkmark when the transaction is verified on the network.

If the bonding transaction or send transaction fails, we can notify that an error occured, and clicking on the error should send the user back to the bonding page, or the send page, to fix the issue.

This sort of optimistic behavior makes the UI feel much faster and more responsive even with slower block times.

[jbibla]

i am not in favour of being overly optimistic - but i think showing loading while blocks are being finalized is important. we could also update balances instantly and tx's should appear in the tx history instantly (with a loading icon if loading).

[jbibla]

upside: nicer ux
downside: more complicated logic in app

assumptions: users are impatient and want to do a bunch of tasks right after one another - and will be annoyed if they have to wait for blocks to be finalized (3s max?)

we should instantly update the interface to show that the atoms have bonded and remove the atoms from the user's wallet. ... The same for sending tokens.

sounds great.

The transaction history should show that the tokens have been sent. Somewhere in the transaction card, there should be a loading icon showing that the transaction is in progress. It can change to a green checkmark when the transaction is verified on the network.

sounds great.

we can notify that an error occured, and clicking on the error should send the user back to the bonding page, or the send page, to fix the issue.

sounds great.

[jbibla]

from #1118:

instead of blocking the user from proceeding with more submissions / transactions ...

- clear form for new tx's
- show loading icon in sidebar next to transactions link
- include the loading tx in tx history instantly with loading icon and adjust language accordingly
- if it fails, replace loading icons with error icons and replace loading language with error language
- on failure, show button to retry transaction

designs for this more optimistic approach can be seen here: https://zpl.io/bLDW6gQ