Component: show a loading spinner on button

[zoeyli-46]

Given I am on a form, When I have clicked the next or submit button and the page does not respond right away, Then the button shows a loading spinner so that the user knows the page is loading

For context: This was noted as an issue on the New Entrant application where after the user uploaded an attachment and clicked the next button, nothing happened for a few seconds which can cause the user to think the button is not responding. So, a loading spinner would help the user understand the page is still loading.

Dev checklist

• [ ] conditionally show the spinner based on the value of isSubmitting in the MultiStepBase component
• [ ] we have existing spinner components we can reuse

[BCerki]

@zoeyli-46 , what's supposed to happen to the rest of the page when we see the spinner? Do we see the readonly version of the form, or something else? Also since there isn't a wireframe, should we use our existing spinner?

[zoeyli-46]

Typically when I see a button have a spinner on it the page stays the same (not in view only) the only thing that changes on the page is the button which has a spinner. can you link me to the existing spinner so i can see?

[BCerki]

Typically when I see a button have a spinner on it the page stays the same (not in view only) the only thing that changes on the page is the button which has a spinner. can you link me to the existing spinner so i can see?

We don't have an existing button-specific spinner. The ones we're using in other places in the app are the mui skeleton: https://mui.com/material-ui/react-skeleton/

[zoeyli-46]

Yes lets use our existing spinner, thanks Brianna!!

[BCerki]

Typically when I see a button have a spinner on it the page stays the same (not in view only)

If it's not view only, then people will be able to interact with the form fields while the submission is in progress.