How to do loading animations when at certain times the application is too fast for them?

Question

I am facing a strange "catch-22" like problem, while developing an application for a mobile browser. My problem is that, some inner-app screens are fetching data from a back-end server, and the speed to fetch this data is very-very unreliable.

By this, I mean, that most of the time, the data is received almost in an instance, in which case my app would not require a loading animation, yet sometimes, the receiving of the data could take up to a second, or even 2 seconds, in which case I need to give a feedback to the client, that his click was registered.

At first, I was thinking about creating an animation, where after a user interaction, the screen gets blurred (with a very short animation, 0.2s), and when data is received, and the layout is rendered and replaced, I unblur the screen. This works great, when the blur-unblur animation has enough time to finish. But when my data is received near instantly (which is most of the time), this looks like a flash, which is very disturbing and it looks very unprofessional.

What is the correct approach to a simmilar problem? Should I look for a different kind of loading animation/indication? If yes, what would be an appropiate one for this situation?

Answer 1

It would help if you shared some of the UI. but from what i gather from your question, I think you can use skeleton loaders instead of the blurring approach. this way it maintains the structure of the UI elements while showing the user that there is some loading taking place across multiple UI elements.

https://betterprogramming.pub/the-what-why-and-how-of-using-a-skeleton-loading-screen-e68809d7f702

Answer 2

1. I need to give a feedback to the client, that his click was registered.

   You can focus on that problem instead (e.g. animate the button tap).

2. I agree with some of the comments that you should just use something less obtrusive (e.g. a small throbber on the previous screen while the new one is loading). At least that way it will be less jarring if it needs to appear and disappear quickly.