Group-income-simple: Improve the UI stack of each page in the app

[mmbotelho]

Problem

From Scott Hurff's How to fix a bad user interface:

Every screen you interact with in a digital product has multiple personalities.
Five, to be exact.
Depending on the context, these personalities are revealed to your customer. In designer-speak, we call these states. And you should consider these states for every screen you make.
That's because following the rules of the UI Stack and the five states helps you create a cohesive interface that’s forgiving, helpful, and human.

At the moment, pages in the Group Income app do not have all the states described in the UI stack:

Solution

• Define how each of these states should look and feel in our app - create the templates.
• Take those templates and adapt it to each page, in case it's needed;

_Notes: Related to #496_

[mmbotelho]

Update on this issue - we already have:

• Blank states;
• Partial states;
• Error states;
• Ideal states.

The main thing we are missing at the moment is the loading state. ATM, I believe we need:

• A skeleton loader (#496 but for the entire app, not just the chat);
• An indicator that some type of transfer between the client and the server (or vice-versa) is happening.

[dotmacro]

I believe we need...An indicator that some type of transfer between the client and the server (or vice-versa) is happening.

A loading icon (https://codepen.io/dotmacro/pen/VwwpYrx), or something different?

[mmbotelho]

That's awesome @dotmacro !!! We can put it here:

[taoeffect]

Great link @dotmacro shared: https://99percentinvisible.org/episode/wait-wait-tell-me/

[sandrina-p]

Another thing to add related to "loading state": #802

[mmbotelho]

947 is related to this