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?