Spinner for data loading

While data is on its way, your chart needs to show something. Build a clean loading state with a spinner or a skeleton, and handle the error case gracefully.

Members only
5 minutes read

Outline (draft)

  • Why feedback matters: a silent loading state feels broken. Even a 200ms blank screen breaks user trust.
  • The three render branches: loading, error, success. One component per branch keeps the code readable.
  • Build a CSS spinner from scratch: a single div, a keyframe animation, a few lines of CSS. No library needed.
  • Skeleton alternative: when the chart shape is known, fake its outline in grey. Often feels faster than a spinner.
  • The error UI: useful message + retry button. Don't show a stack trace.
  • Where to put it: replace the chart, overlay it, or fade it in on success. Tradeoffs of each.
  • Test it: throttle the network in DevTools to actually experience the loading state. Most bugs hide here.

Oh no! 😱

This lesson isn’t available just yet.

Take a look at the status badges next to each lesson in the sidebar to see when it’s coming out.

Thanks for your patience! 🙏

← Previous

Data wrangling

Next →

Project