Skip to content
This repository was archived by the owner on Jul 29, 2021. It is now read-only.

Add a loading status sign [Malbork] #42

Closed
zhangzhongnan928 opened this issue Oct 15, 2020 · 4 comments
Closed

Add a loading status sign [Malbork] #42

zhangzhongnan928 opened this issue Oct 15, 2020 · 4 comments
Assignees

Comments

@zhangzhongnan928
Copy link
Contributor

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
Copy link
Contributor

SmartLayer commented Oct 15, 2020

@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
Copy link

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
Copy link

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.

skeleton_2

Swap_Desktop_Skeleton

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

@colourfreak colourfreak changed the title Add a loading status sign Add a loading status sign [Malbork] Nov 1, 2020
@colourfreak
Copy link

colourfreak commented Nov 1, 2020

Screenshot 2020-11-01 at 20 04 59

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/

00_CoFi_Desktop_Empty

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

00_Dividend_Desktop_Claim_Empty

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

02_Pool_Desktop_Empty

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants