Transforming Wait Times with Animated Loaders for SuperAstro
Varesh Mukhekar
Designing the Wait…
Turning a 12-second loading screen into part of the product experience.
Loader animation
TL;DR
For SuperAstro’s new Kundli GTM, we introduced a richer dashboard experience with:
40 personalised queries
AI-generated summaries
Insights across Love, Career, Health, and Money
The challenge?
Generating that dashboard took around 8–10 seconds, sometimes stretching to 12.
Instead of hiding the delay behind a generic spinner, I designed a multi-stage animated loader in Rive that transformed waiting into anticipation.
The Setup
SuperAstro, an AI astrology app, planned a new GTM focused heavily on making the new kundli dashboard feel deeper and more personalised from the very first screen.
The post-payment flow looked like this:
That loader quickly became one of the most important parts of the experience.
Because after payment, users weren’t just waiting for a screen to load.
They were waiting for the insights.
The Problem
Generating the Kundli dashboard required real backend processing:
That took around 8–12 seconds.
Technically, that was acceptable.
Emotionally, it wasn’t.
Right after payment is one of the most fragile moments in any product experience.
Pov of Users while waiting for their report
A generic spinner instantly made the experience feel transactional and lifeless.
And because the dashboard was the first moment of value after payment, a weak transition reduced the perceived quality of the entire product.
The Design Thought
The idea was simple:
Instead of making the wait disappear, make it feel intentional.
The Solution
Three sequential states. One continuous feeling.
The full animation runs for ~12 seconds while still allowing flexibility based on backend response time.
Motion Decisions
A few motion choices were extremely deliberate.
No progress bar
Backend timing was variable.
A percentage-based progress bar creates expectations the system can’t consistently guarantee.
Instead, qualitative labels like:
Aligning…
Mapping…
Reading…
communicated progression without promising precision.
Built in Rive
The entire animation was built in Rive using a state machine.
A persistent ambient layer continuously ran beneath all states to keep the screen feeling alive.
One important engineering decision:
The loader exit was triggered by a backend event — not a fixed timer.
Which meant:
Fast response → gracefully hold the final state
Slow response → continue looping naturally
Never exit before the report is ready
That last part was non-negotiable.
The Bigger Takeaway
Loaders are underrated product surfaces.
Most products treat them like dead space.
But in high-intent moments — especially after payment — the loader is the experience.
Its job wasn’t to kill 12 seconds.
Its job was to reassure users that something meaningful was being prepared specifically for them. And that completely changed how the delay felt.
The biggest learning for me was this:
The moments between screens are still product experiences.
Sometimes, they’re the moments users remember the most.
Designed in Rive · SuperAstro · 2025
Like this project
Posted May 25, 2026
Designed a loading screen animation for SuperAstro's Kundli dashboard using Rive.
