Group-income-simple: Add loading state to form submission

[sandrina-p]

Problem

When submitting a form, there's no indication about what's happening (a loading state).

So far we never needed (or remembered them) because all the actions are done locally, so no network isn't required and everything is instantly done, but in the real world, these things will take time. (ex: login or group creation).

Solution

Design (@mmbotelho) and implement the loading state where applicable.

[taoeffect]

I don't think we need to make buttons themselves display a loading state beyond being disabled. The loading state can appear as a message and/or progress bar at the bottom or top of the window.

[sandrina-p]

Okay, let's leave that for @mmbotelho. But just a note: using disabled (as HTML attribute) while the button is loading can be a bad practice because it hides the button from keyboard/screen readers, and that's confusing. In that scenario, a better approach is to use aria-busy or aria-label="loading" and then prevent the action with JS.

[mmbotelho]

I don't think we need to make buttons themselves display a loading state beyond being disabled. The loading state can appear as a message and/or progress bar at the bottom or top of the window.

@taoeffect the best practice in these situations is to always give feedback to users as close as possible to whatever element triggered it. For this reason, I do think showing a loader in the button itself is the best option and the one I would recommend.

I made a very simple codepen with how I think the button should behave. Let me know what you think!

@sandrina-p @pieer

[sandrina-p]

@sandrina-p This UX is very much what I had in mind, I approve 👍

[taoeffect]

@mmbotelho I like that, it looks great! 😄 👍

[mmbotelho]

Ok, I'm removing myself from this issue, it's ready to be picked up by either @sandrina-p or @pieer for the implementation!