Redesign presentation of sync feature
There are problems with current version of sync:
- The default "synced" message isn't telling much to user. It's hard to decide what's synced with what.
- We don't have any loading, which may confuse some users right at the beginning of the page.
- There is no clear indication where Explorer gets that info from.
- It looks bad on mobile style, because search bar is to wide.
So my propositions of solving all that issues is:
- Change default message to
Explorer synced with blockchain
. If necessary make font smaller. - Before both numbers being loaded put some "connecting" info and yellow color.
- Make searchbar expandable on mobile, to have all the place for sync info.
- Add dialog (or tooltip, but I think dialog is better), to display more a detailed message. In that message show headblock number of Hafbe endpoint, last blocks of the rest of app, current time of last synced block and finally the difference. All the stuff we use in background to calculate that. I'm not sure how to present it yet, it's probably an open topic.