Add loading indicator to Authenticator components

[mrcoles]

Is your feature request related to a problem? Please describe.

When I submit an Authenticator form (using React), there is no indication that it is doing anything until the request completes. This can be confusing to users who do not see any visual feedback and aren’t sure if their submit worked or not.

Furthermore, this is exacerbated by incomplete form functionality in these components: #2310

Describe the solution you'd like

Introduce a loading state to the forms that shows it is performing an action. This could be a spinning indicator or the button text could change to say that it’s doing something or something else. However, some indication that it is working would be fantastic.

Describe alternatives you've considered

As an alternative, I would have to build my own forms.

[aldo-roman]

Hi @mrcoles

This is related to #2217. I added a disabled state to the sign in button when loading. It was published on aws-amplify@1.1.11 / @aws-amplify/storage@1.0.20. Although a loading spinner indicator would be a good addition.

[crcommons]

@aldo-roman We'd also like to have loading indicators for sign in (as well as other asynchronous requests). Is this on the roadmap? Specifically we're looking for this in the aws-amplify-react-native repo.

[aldo-roman]

Not in the roadmap AFAIK, but I agree this is a good UX pattern that we should apply. Adding it should not be that hard, the main blocker I see is there is no icon gallery for AWS Amplify.

[jordanranz]

FYI, we have started an RFC discussion for a proposed Amplify UI Component refactor to increase customizability and flexibility for our components. Please feel free to add any additional comments to the following issue:

#3279

[mrmaiko]

Any update on this indicator? The short pause is really not good for user experience.

[craig-o-curtis]

A fix for the Sign In button is the following code.
I've also submitted an issue to target the forgot password and create account buttons #5038
`

    // Override AWS-Amplify button
    button[data-test='sign-in-sign-in-button'],
    button[data-test='sign-up-create-account-button'] /** add functionality for this **/,
    button[data-test='forgot-password-send-code-button'] /** add functionality for this **/ {
        width: 12rem;
        height: 3rem;
        &:disabled {
            font-size: 0px !important;
            color: white !important;
            background: linear-gradient(90deg, dodgerblue, white, white, dodgerblue);
            background-size: 400% 400%;
            animation: gradient 2s ease 5;
            animation-fill-mode: forwards;

            &::after {
                font-size: 12px !important;
                color: navy !important;
                text-transform: normal !important;
                content: 'Loading...'
            }
        }
    }
    @keyframes gradient {
    0% {
    	background-position: 125% 50%;
    }
    100% {
    	background-position: 0% 50%;
    }
    }

`

[ashika01]

@mrcoles This should now be part of the new UI components introduced recently. For more information - https://docs.amplify.aws/ui/auth/authenticator/q/framework/react

For any issues or suggestion for enhancements, feel free to open up a new issue.

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.