Whenever I think of loading animations, my brain makes a strange connection to those times which we, under our compulsory education, had to sit through mock exams and national exams. Palms perspiring, time ticking, with the invigilators pacing up and down, these motions felt akin to the wait of the loading animations. Alright I'm exaggerating.
I digressed. So here's a summary of what I learned about loading states for UI components. The main challenge of considering which loading pattern to choose lies in deciding your logic - whether it is a passive or an active loading. Passive loading is when everything is loaded beforehand. Active loading usually occurs when the user triggers an action (refer to Pencil and Paper's article on this for more information).
The core interaction principles are:
1) Provide immediate feedback after receiving the request to load
2) For waits longer than 2 seconds, use an indeterminate loading interaction
3) For waits longer than 10 seconds, use a determinate loading interaciton.
4) Make sure loading interactions are dynamic and contextual.
Now you might be asking what's the difference between indeterminate or determinate loading, again, I urge you to refer to Pencil and Paper's article as they done a comprehensive article on it.
A study done by Hong.Y (2018) revealed that skeletons loading screens, as compared to other loading methods such as a spinner or a blank page (control), its perceived duration was the least.
Again, while the reduction of perceived duration is in most cases, a good thing, context still matters. For instance, in a scenario whereby a user is filling up taxes and had gone through an arduous process of filling in payments and confidential details, having a longer perceived duration could give the user a sense of assurance.
.png)
.webp)
