Change text on button to "loading..." while loading and change it back to "submit" after transaction completed

From a users perspective, when I visit sites that enable a overlay spinner, it feels like the site is frozen and I'm blocked from doing anything else. From a coders perspective, I see it's purpose in a 'pay now' or 'checkout' button situation. Then the page is completely disabled to prevent multiple clicks resulting in multiple orders, right? It's also letting the user know 'wait a minute, we're processing your order'. In other situations, I feel a small spinner before the button text is appropriate. It would be less invasive on your UI and make your page feel more accessible to the user.

This is really a design-specific question. I personally, from a usability and accessibility standpoint, don't think having the spinner replace the text on the button is a good choice. I do think that users generally like to know that something is going on behind the scenes, I personally prefer a slightly transparent overlay on the page with the spinning icon in the middle of the screen if it's the final action on a page. If it's one of many potential actions on the page, I'd put some sort of indicator in that area, but not necessarily on the button itself.

None of the above options. To me, all the proposed spinner locations feel like the wrong context, I have a solution that works for RTL users as well as everybody else!

When you add the spinner to a button, in place of text, or inside page content like this you arent necessarily telling your user that they must wait, you are adding a spinning image as content, and they have to guess what it means.

Instead of adding the spinner as page content, what if you disabled the button, and displayed the spinner (just for a moment) over the middle of the page, on top of an overlay. This keeps the spinner outside of the site content, and indicates to the user that this layout is in a different state: loading.

A centred, overlaid spinner also gets around your LTR and RTL issues as both users see a centred item the same way ☺️

An extremely interesting question.
I don't think I know enough about the different methods to say which one is best but I know google design have some great guidelines on design and animations etc. I had a look for a submit/spinner section but couldn't find one - maybe you can.

Might I suggest an alternative though - replace the text with other text. E.g. Replace Submit with Submitting...and then the dots on Submitting... are animated, similar use of wording for processing etc.

@Gatesunder brings up an interesting point which I've seen on a number of websites. The idea of making the whole page more opaque with a single spinner in the centre. This would be the most explicit method, which also means that the user can't try to interact with the page elsewhere.

As a side note, regardless which kind of method you choose, specifying a minimum time that the spinner is on the page is a good idea - otherwise the spinner might only appear for a split second which doesn't look great because users don't have time to understand what it was that flashed up in the time it takes to blink.

Hope it helped.

I highly discourage replacing text with a spinner, because that would mean you remove the call-to-action description. Don't ever remove important information from the eyes of the user just because you are working on something! That's bad UX.

Also do not freeze the whole screen if not necessary. Keep the UI usable at all times. Maybe the user doesn't even care about your async operations and just want to carry on... Forcing them to wait would be a bad decision, if it is not needed for the process they are currently working on.

Important: Put a spinner someplace, so the user can see that the application is working. If it is before the text or after doesn't really matter, you should decide based on your design.

The whole page should become a spinner, whereby the text and boxes rearrange themselves into a Lorenz attractor until spinning is done or error occurs, whereby the Lorenz attractor unfurls with the requisite update seamlessly made and one of those "look at me" blinky circles next to where things were updated ...

... or maybe just a simple spinner to the left of the text within the button (imagining a rounded edge button in my head here, so that the spinner is equidistant from the edge of the button for pi*r of the spin).