Is showing a loader inside a button on mobile a good practice?

Question

On many apps the "loading" state is displayed inside a blank screen. I was considering having it directly inside the touched button but I wanted to know if it's something common. I don't have example of apps in mind right now, but I know that I saw this somewhere on mobile.

The idea is to have something like Ladda when the button is touched, and once the loading is finished I made a transition to the target page.

What do you think?

Answer 1

I read through the Wait Indicator Pattern from Designing Mobile Interfaces (http://shop.oreilly.com/product/0636920013716.do). First of all, I could not find anything against this practice, but it wasn't mentioned anyway. You definitely have to consider the possible problems with your approach:

• Can the user still select content after he has clicked the button? If not, wouldn't it be better to use an overlay? Also, what happens if he selects a different button in the mean time?
• What if it loads too long? Imagine the user scrolls out and forgets that he was loading something - and suddenly the screen changes.
• What happens if the user clicks the button again? Is the loading cancelled? How can you indicate this behavior?

In my opinion, this pattern is really cool, but probably more suitable for actions like "start downloading" or "play"/"pause".

Answer 2

I add to @Don L. concerns one more.
A submit button with loading indicator could be hidden behind user's finger or it could be unnoticed by user. This could lead to a user's confusion. Pay attention at some typical user's grips.