Add a loading status sign [Malbork]

[zhangzhongnan928]

If any part of the page is loading info from infura or wallet, this loading sign need to show up, to let users know the UI is loading, you don't need to refresh, just wait for awhile.

Same if the page don't show info and loading sign, then users know there is something wrong, let refresh.

[SmartLayer]

@colourfreak can you cover this in the new design? @zhangzhongnan928 this is unspecific so I and @colourfreak must later edit it to make an itemised list where such status icons are missing.

[colourfreak]

What are those parts? Sorry, I don't know what comes from infura or a wallet. I guess balances are from the wallet. Can you please make a few screenshots and mark in red a few places where this loading indicator is needed?

[colourfreak]

Ok, I think I know what you mean. But please confirm If I got you right.

I can propose a skeleton design. This is a very fast animation in a loop, usually gray rectangles with some "shining" effect.

How to code this:
https://material-ui.com/components/skeleton/

[colourfreak]

Looking at how this is implemented in Malbork version. This is not exactly how skeleton design works. This is animation only. It appears only when you are loading data. So in our example, we should show more 0.00 or 0 instead of leaving those gray boxes. By the time they are loading, we can add this skeleton animation.

Let me know if you can code it.

Claim CoFi
https://app.zeplin.io/project/5f7d9b83384ebd4699f03e3b/screen/5f9f079cdf523e1f593f60fc/

Dividend
https://app.zeplin.io/project/5f7d9b83384ebd4699f03e3b/screen/5f9f08d5c02c6c06e1102ec5/

Pools
https://app.zeplin.io/project/5f7d9b83384ebd4699f03e3b/screen/5f92a76ea2d26506d220f68a/