web-wallet: Update the Sync indicator to reflect the actual progress

[nortonandreev]

Summary

Currently the sync is an asynchronous operation that can take a lot of time, especially if synced from genesis (block 0); but there is no indicator whatsoever about its progression.

We should provide an easy way to communicate the progression of the synchronization.

Related Tasks

• [x] https://github.com/dusk-network/dusk-wallet-js/issues/78

[kieranhall]

The UI for this has been added here: https://www.figma.com/design/z6UnA0BtMBUKIcCXD975um/Wallet-Extension-(JULY-26th)?node-id=6207-159507&t=ESWrbfcHC0L6Z8QG-0

[ZER0]

As discussed with @kieranhall, I created a simple snippet to demonstrate potential behaviors of the progress bar. The code itself is not meant to be exemplary but serves to illustrate the UX/UI behavior. I attempted to replicate the onblock callback approach. This snippet should be used as a guideline to discuss the desired UX.

As mentioned before, the onblock is triggered for discrete chunks. If no additional code is used to animate or interpolate values, users will see the progress bar as shown in the snippet with "No Transition" (the first one).

A simple mitigation can be achieved by adding a CSS transition, as shown in the "Only Transition" progress bar. However, this approach is still not ideal because the value of the current blocks will still be displayed with each chunk.

Personally, I think the best approach is to interpolate the value with JS and avoid transitions, as demonstrated by the last two progress bars in the snippet. The difference between them lies in the speed of interpolation. Of the two, I believe a smaller increase (slow) yields better results. But keep in mind that even with a smaller increase, performance may vary across different machines, and it might end up on the "fast" spectrum.

[laremas]

I would like to use the 3rd example: No Transition + JS interpolation (slow)

i added the block number/current block in the syncing bar text: