Loading improvements

[alongoni]

Summary

Closes #71

1. Open the Transaction details page and open the Batch Viewer. Something like this should appear as a loader:
   https://www.loom.com/share/499aa7cda2f449e0b6acf90ce6460e01

[coveralls]

Pull Request Test Coverage Report for Build 2271834893

Warning: This coverage report may be inaccurate.

We've detected an issue with your CI configuration that might affect the accuracy of this pull request's coverage report.
To ensure accuracy in future PRs, please see these guidelines.
A quick fix for this PR: rebase it; your next report should be accurate.

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 44.267%

---

Totals
Change from base Build 2271129611:	0.0%
Covered Lines:	2170
Relevant Lines:	4173

---

💛 - Coveralls

[github-actions]

• 🔭 Explorer: Explorer test app
• 🔒 Safe Swap App: Trade test app (add to your safe apps)
• 📈 Trade: Trade test app
• 📚 Storybook: Component stories

[ramirotw]

Holy cow!

What about adding it to the User details and also to the Order details?

[alfetopito]

It's loading too fast to me so I cannot see the animation for very long, so I've tried the storybook instead

Screen.Recording.2022-05-04.at.09.29.46.mov

Is it because of color theme that I cannot notice the effect in the eyes?
I mean, here the eyes are black and I only see the right one bouncing a little

[elena-zh]

Hey @alongoni , great job!

Fust a nitpick: I noticed, that some elements are still loading in tables when the 'loading cow' disappears. See the video: https://watch.screencastify.com/v/apygTfJrmAvlDxeCshbC

Can we 'expand' this loading effect somehow and show it until all page elements are loaded?

Also, maybe we could move the 'loading cow' higher on the page

Thanks!

[anxolin]

I love the initiative! :)

There's a strange effect when loading. First the loader shows in one position, then it quickly charges, and the it disappears. It creates a strange effect.

I would suggest fixing this logo jumping, and maybe experiment with a delay, so if it loads too quickly we don't even show the loader. Or it appears using a CSS animation so it doesn't do this effects.

[ramirotw]

Fust a nitpick: I noticed, that some elements are still loading in tables when the 'loading cow' disappears. See the video: https://watch.screencastify.com/v/apygTfJrmAvlDxeCshbC

Can we 'expand' this loading effect somehow and show it until all page elements are loaded?

This @elena-zh implies making other code related changes that weren't part of this ticket, if the intention is to replace or hide somehow the intermediate spinners we should do it throughout the app but that also requires more thinking and it makes sense to do it in another ticket so @alongoni can focus on the style behavior. Wdyt?

[elena-zh]

@ramirotw , I have added this comment to the #21 (comment) issue

[alfetopito]

Now I can see the pulsating eyes, nice!

One point, though. The animation expands from top->bottom left->right. Can you make it expand from the center of the image instead?

[ramirotw]

@alongoni could you take a look into the build error?

ERROR in /home/runner/work/explorer/explorer/src/apps/explorer/components/TransactionsTableWidget/index.tsx
ERROR in /home/runner/work/explorer/explorer/src/apps/explorer/components/TransactionsTableWidget/index.tsx(9,1):
TS6133: 'Spinner' is declared but its value is never read.

[henrypalacios]

@alongoni I have put the CowLoading component also in the tab Orders to be consistent with all other views.

In the future it may be possible to use shimming with the shape of the content as we did with the volume graph and use Cow loading only for the first rendering.

[alfetopito]

@alongoni I have put the CowLoading component also in the tab Orders to be consistent with all other views.

In the future it may be possible to use shimming with the shape of the content as we did with the volume graph and use Cow loading only for the first rendering.

I like this idea, could you create an issue for that so we don't forget to get back to it?

[alongoni]

I love the initiative! :)

There's a strange effect when loading. First the loader shows in one position, then it quickly charges, and the it disappears. It creates a strange effect.

I would suggest fixing this logo jumping, and maybe experiment with a delay, so if it loads too quickly we don't even show the loader. Or it appears using a CSS animation so it doesn't do this effects.

Hey @anxolin thanks! we'll tackle this on #21.