Overlays

Note: rm -rf node_modules && yarn install needed.

Introduces some overlays over the whole app in some special cases. For now, these are overlays, i.e. they block the whole UI.

When parity is launching / UI trying to connect to parity

Show a loading screen. To reproduce: reload the page, there's a 2s frame where you can see this loading screen.

When we're syncing

Show a syncing screen with percentage. To reproduce: Once in a while, the light client will sync, so you'll see a 1s flash screen about syncing. As discussed previously, it might be a good idea to show this screen only if it's syncing for more than x seconds. If you want to show this screen longer, in a terminal parity db kill --chain kovan, and it will sync from the beginning.

When connection is poor or non-existant

Show a message for user to check internet connection. To reproduce: turn off your wifi. On my machine, sometimes it takes ~30s for the light client to realize there's no internet... but eventually it detects it. Rerunning yarn start-electron might help. PS: if these 30s are bad UX, we can add an additional front-end detection for internet connection.

When clock is not sync

Show a simple how to fix message, specific to each OS. To reproduce: On mac, in the Date & Time settings, I just unchecked the automatic time setting, and manually put a 10s time difference. Rerunning yarn start-electron after that might help if there's no immediate overlay.

PS: On a global level, I put a conditional on these overlays, instead of a redirection, so that we don't lose the URL after the overlay disappears. Plus, it allows more flexibilty, e.g. semi-transparent overlays etc.