Loading indicator for token dashboard components

[pdyraga]

Loading the data and initializing components takes some time. We currently display a simple overlay with Loading label. We need to figure out how this should eventually look like.

[liz-shinn]

Have some updates on this!

I think we have two situations here. For one instance, there's a full page loading spinner for transitioning between full pages. This would have a spinner styled for the larger page loads and fitted to the whole page.

Additionally, there's a smaller loading indication for smaller interactions within parts of a page. For that situation, I think a circular loading spinner would make sense. We're using a clock spinner in the banner notifications. I think using something closer to a pulse / beacon would make more sense with the brand, though.

[liz-shinn]

For the full page load, here's an example of what I mean:

I would recommend doing something like this for the token dashboard when we have a full page loading. We would use the following Keep icon animation: https://lottiefiles.com/share/syB8hh

For example, when clicking between tabs, there would be the Keep K animation in the solid colored background to the right of the menu and under the nav where this loading icon would be centered.

[liz-shinn]

Here's a GIF of it ^

[liz-shinn]

How it would be placed within the context of the dApp:

Note that we don't show the components on the page until they're fully loaded. We would just show the blank background with the K until everything is ready to be shown.

For timing, I think it should play for a minimum length, and then repeat that minimum length if it takes longer than that.

[liz-shinn]

Found a good spinner that I customized on loading.io that we can use for smaller interactions:

It's easy to change the color and size and re-export it. GitHub won't let me upload an SVG but I do have an SVG version of it too.

In context in the dApp:

[r-czajkowski]

@liz-shinn, sometimes one section fetches faster than other. Do you think we can display this KEEP indicator per section? as now is?

[liz-shinn]

Yes – if you want to sync on this let me know. I imagined this indicator would be for loading full sections (e.g. if you switch between the Rewards page and the Token Overview page). What is the shortest page load time? Probably don't show it if it's under a certain amount of time. I was going to suggest setting a minimum length for the loading indicator, but if there's too much full page loads with a 2-3 second animation it's going to give the impression that the system is slow.

[liz-shinn]

What are the options for setting conditional requirements for showing/not showing this K progress indicator?

So, potentially...

1. Loadtime <0.5 a second – show grey background screen
2. Loadtime >0.5 a second – show K animated loader

[liz-shinn]

Doing some reading on this, and this article on perceived performance / time and this section suggests loading times are perceived like this:

Flowdock convo: https://www.flowdock.com/app/cardforcoin/tech/threads/SV-RboFM4Q1j6KD6EzmmHNQ-T78