Introduction
In the times of AI and LLMs, we see a lot of loading animations.
This includes loading texts e.g. "AI is thinking...".
This post is about loading animations in general.
I've used all kinds of tools. Played a lot of different games (grew up gaming like crazy).
Recently, I've been digging deep into web performance. It's made me think a lot how animations affect perceived performance.
Loading spinners vs placeholder content
Loading spinners are the old days. I mean a blank page where you've a spinner just spinning. Or worse, multiple spinners on the page (e.g. twitter). I don't like them. They often cause layout shift and just run forever. You don't feel a sense of variety or what's to come.
Loading placeholders are more modern. They cause less layout shift. By placeholder content, I mean a blank page where you see the shape and structure of the content to come. Usually, they are animated. They look and feel nice. You feel "closer" to arriving at the destination (seeing your content).
An example from a stock market explorer I built:
What happens in my brain when I see loading?
When I see loading as a user, it tells me the browser is working. It tells me it's not ready yet. Loading makes me feel like the site is working and we're making progress. Soon I'll get what I want.
Here comes the interesting part: If it takes too long, I start to question things. Is it loading? Is it broken? Did I do something wrong?
So while loading can be a good thing. It shouldn't be for too long.
An interesting thing though: If the loading takes a long time, but throughout the loading process, it changes its animation. It keeps me engaged. It tells me something is happening. It's a variety. This can literally be after 3 seconds you change the style of your loading animation. Even with something simple as changing the color or icon.
A new type of animation after a while can make you feel like "progress is happening". Keep this in mind. It's an important point for the post.
Different types of loading animations
Spinners
We talked about spinners already. If for too long, they can be annoying. It's the same type of animation. It's a classic one. It's the only thing you see. You feel far away from the destination.
Loading bar
Loading bars are interesting. I don't know how it works in games, but on the web, you can't really know how long it takes to load.
What's super interesting if you look at many loading bars on the web, they typically have a pre-fixed pattern. They move from left to right. They fill up fast and then slow down. Typically, they stop at 70% or 80%. Then you'll usually see the filled up bit of the bar contain some sort of loading animation. And right before the site is ready to show, the bar gets filled up quickly and the site is shown.
The reason I find this super interesting is because you're communicating progress. Well, false progress. But for the users, it feels like progress, as if they're seeing something. Especially if it's not too slow. If it's slow, they'll notice it's just stuck on 70%. They'll notice it's a fixed pattern.
Loading bars are cool. I like them to an extent. But they do have their limitations. Placeholder content is better as mentioned before. I also guess it depends on what you're building.
Logo animations
Logo animations are the same as spinner animations. But they feel more alive. Because you're animating the logo of the brand. It's not something you often see. Typically, it's a fancy SVG animation.
I like them, but they share the same limitations as spinners.
How LLMs use loading animations (e.g. "thinking...")
If you've used Claude, have you seen how they don't just animate their logo, but they also show you a text like "Pondering, stand by....".
Omg, this is so interesting (sorry, I think outloud sometimes 😄). Claude is slow. It's actually remarkably slow. Just to have that on the table.
Anyways, because LLMs chat with you, it feels like you're talking to someone. By not just showing you a loading spinner, but also showing you a text, it feels like they're communicating with you right away.
And it's so interesting, because the longer Claude takes, the more it changes its text. Sometimes it already knows it's gonna take a while, and tells you something like "Long files takes some time..." (it's something else, I can't remember it lol).
Now, the reason I wanted to say that they're slow is because they need to make up for that slowness.
Let's say a response takes 8 seconds. I don't know if this is how they do, but what they might do is every 3 seconds, change the text.
So for 8 seconds:
0-3 seconds: "Pondering, stand by..."
3-6 seconds: "I guess it takes a while..."
6-8 seconds: "I'm almost there..."
This is just an example.
I can imagine they look at how users use their app and see how long the average slow response is. If it's 10 takes, they might change it 4 times within those 10 seconds and the final loading text just stays there till response is ready.
As a developer myself, I understand the game they're playing. But normal users might actually buy into this. They might think "oh, it's almost there". Even though it's not.
Claude is honestly why I started thinking about this deeply. Also now that I'm starting my design engineering journey.
Conclusion
Perceived performance and animations go in hand in hand.
The goal is to keep the user engaged and not annoy them. If they get annoyed, they’ll look for something else.
