How to show a long loading operation?

Question

In our Material-based app, we have integrated a speech recognition service. Typically when a user reopens our app, the speech recognition session needs to be resumed by either (1) reconnecting, which takes around 1-3 seconds or (2) starting a new session, which can take up to 10 seconds.

The speech recognition is an important part of our app, but the app is still partly usable without it (for example navigation could still work).

For the short reconnecting operation, our idea is to show show a circular indeterminate loader (https://material.google.com/components/progress-activity.html#progress-activity-types-of-indicators) instead of the normal recording button:

I have three questions:

1. Do you think this UI is adequate?
2. For the long running restarting operation, would it make sense to indicate what the application is doing (snackbar? tooltip?) or show a dialog (that will block the application) with a determinate loader so that users know how long they (roughly) have to wait?
3. Do you have any other ideas how to implement this within Material?

Answer 1

For short times the circular indeterminate loader will be perfect.

For longer times you need to provide some additional information to the user which tells the user that this activity may take some time. It is always a good idea to tell your users what is going on so consider providing a live time remaining feature.

Given this looks like it is mobile app, you also need to consider what would happen if the mobile device suddenly losses its signal - you don't want the user to be wondering why the apps looks like it is hanging.

The UX guru Jakob Nielsen wrote this response time article in 1993, but it is still valid today:

https://www.nngroup.com/articles/response-times-3-important-limits/

Answer 2

I think you should use a circular dynamic progress bar outside the button, like this http://jsfiddle.net/andsens/mLA7X/. You can let there the button and add the text, the percent with a smaller font-size, on the bottom. I think this is the simplest approach, the most natural.

See also http://www.jqueryscript.net/loading/Dynamic-Circular-Progress-Bar-with-jQuery-CSS3.html.