Rolan Lobo

Posted on Jan 22

Stop Lying to Your Users With Spinning Circles

#react #ux #frontend #webdev

I Gave My Loading Screens a Glow-Up (And You Can Too!) 💅

You know that awkward moment when your app is loading and all your users see is a lonely spinning circle? Yeah, me too. So I decided to do something about it.

The Problem: Spinners Are Liars 🤥

Picture this: You're building a file encryption app (yes, that's what I do for fun), and your backend is sleeping on Render's free tier. When someone tries to access a file, they click the button and... nothing. Just a spinner. For 15 seconds.

No feedback. No progress. Just vibes. ✨

Users are left wondering:

Is it working?
Did I break it?
Should I refresh?
Is it time to panic yet?

Spoiler: They always panic.

The Solution: Multi-Stage Loading Indicators 🎯

Instead of a basic spinner that screams "I'm working, trust me bro," I built a loading component that actually communicates with users. Here's what it does:

🔵 Stage 1: Connecting

"Waking up server..." (because yes, it's literally waking up from a nap)

🟣 Stage 2: Authenticating

"Authenticating request..." (fancy words for checking if you're allowed in)

🟡 Stage 3: Decrypting

"Decrypting file..." (the actual magic happens here)

🟢 Stage 4: Rendering

"Rendering preview..." (almost there!)

Each stage gets its own:

Icon (Server → Shield → Lock → Eye)
Color (Blue → Purple → Amber → Green)
Progress percentage (0% → 25% → 50% → 75% → 100%)
Smooth animations (because we're fancy like that)

The Code: Let's Get Spicy 🌶️

I created a reusable LoadingStages component that takes the current stage and progress as props:

<LoadingStages
  currentStage="connecting"
  progress={25}
  estimatedTime={15}
/>

The component cycles through stages automatically based on your app's actual loading process. No fake progress bars here! (We're honest people.)

Cold Start Detection 🥶

The best part? It detects when the server is cold-starting and shows an estimated time:

const responseTime = (Date.now() - startTime) / 1000;
if (responseTime > 3) {
  setEstimatedTime(15); // "~15s" appears on screen
}

This way, users know they're in for a wait and can grab their coffee ☕

The Results: Happy Users 😊

Instead of anxious button-mashing, users now:

See exactly what's happening at each stage
Know how long it'll take during cold starts
Feel confident the app is working
Don't spam refresh (my server thanks them)

Plus, it looks gorgeous. The glassmorphic design with color transitions makes loading actually pleasant to watch.

Want to Try It? 🚀

Check out the full implementation in my repo:
BAR_RYY

The magic lives in:

frontend/src/components/LoadingStages.jsx (the star of the show)
frontend/src/components/SharePage.jsx (where it's integrated)

Key Takeaways 💡

Loading screens are prime real estate - Use them to communicate!
Users tolerate waits better when they know what's happening
Cold start detection turns frustration into understanding
Pretty animations make everything better (scientific fact)

Final Thoughts 🎨

We spend so much time optimizing for speed, but sometimes the wait is unavoidable (looking at me, free tier cold starts). When you can't eliminate the wait, make it informative and beautiful.

Your users will appreciate knowing that yes, the app is working, and no, they don't need to panic.

Now if you'll excuse me, I'm off to give all my loading screens glow-ups. This is addicting. 💅✨

What's the most creative loading indicator you've seen? Drop it in the comments! 👇

P.S. - If you're building anything with file encryption, 2FA, or self-destructing links, definitely check out the repo. It's got some cool security features too!

DEV Community