Should a button show its label in a loading state if a spinner is present?
Let's say I have a login form and after a user clicks the "Login" button, the form begins working and a spinner is added to the button until HTTP processes are complete.
For this example, I will use [*]
to represent a spinner (one of those circles that just spins around and around until loading is complete).
In the loading state, would it be best to keep the "Login" label text inside the button and add the spinner beside it, or remove the "Login" label text and just have a spinner?
For example,
Normal button state content: Login
Scenario A loading state content: [*]
(loading spinner only)
Scenario B loading state content: [*] Loading
I'm leaning towards keeping the text inside the button so the user doesn't get confused as to what the form is currently doing.
Edit: I just found this article that goes into pretty good depth: https://uxmovement.com/buttons/when-you-need-to-show-a-buttons-loading-state/