DEV Community

Fazal Shah
Fazal Shah

Posted on

Using Lottie for Error States and Empty States: A UX Guide

Empty states and error messages are the most neglected parts of web UI. They're also some of the highest-leverage opportunities for Lottie animations.

Why These States Matter

Users encounter empty states and errors constantly:

  • Empty inbox after clearing all messages
  • Search with no results
  • 404 page
  • Network error
  • No notifications
  • First-time user with no data yet

These moments are either dead ends or opportunities. A well-designed empty state with animation can guide users to the next action. A well-designed error can reduce frustration.

Empty State Anatomy

A good empty state has:

  1. An illustration or animation (Lottie)
  2. A clear headline explaining the situation
  3. A call to action telling the user what to do next 
function EmptyInbox() {
  return (
    <div style={{ textAlign: 'center', padding: '60px 20px' }}>
      <DotLottieReact
        src="/animations/empty-inbox.lottie"
        loop
        autoplay
        style={{ width: 180, height: 180, margin: '0 auto' }}
      />
      <h3>All caught up!</h3>
      <p>No new messages. Check back later.</p>
      <button>Compose New Message</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Empty Search Results 

function NoSearchResults({ query }) {
  return (
    <div className="empty-state">
      <DotLottieReact
        src="/animations/no-results.lottie"
        loop
        autoplay
        style={{ width: 160, height: 160 }}
      />
      <h3>No results for "{query}"</h3>
      <p>Try different keywords or check your spelling</p>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Network Error State 

function NetworkError({ onRetry }) {
  return (
    <div className="error-state">
      <DotLottieReact
        src="/animations/connection-error.lottie"
        loop={false}
        autoplay
        style={{ width: 140, height: 140 }}
      />
      <h3>Connection lost</h3>
      <p>Check your internet connection and try again</p>
      <button onClick={onRetry}>Retry</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

For error states, use loop={false} — you don't want an animated error looping indefinitely. Play it once, then show the static final frame.

404 Page 

function NotFoundPage() {
  return (
    <div className="not-found">
      <DotLottieReact
        src="/animations/404.lottie"
        loop
        autoplay
        style={{ width: 300, height: 300 }}
      />
      <h1>Page not found</h1>
      <p>The page you're looking for doesn't exist.</p>
      <a href="/">Go home</a>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

404 pages with good animation have lower bounce rates. Users are more likely to navigate back into your app rather than hitting Back.

First-Time User / Onboarding Empty State 

function FirstTimeUser() {
  return (
    <div className="onboarding-empty">
      <DotLottieReact
        src="/animations/welcome.lottie"
        loop
        autoplay
        style={{ width: 200, height: 200 }}
      />
      <h2>Welcome to the app!</h2>
      <p>You haven't created anything yet. Start here.</p>
      <button className="primary">Create your first project</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

The key difference between first-time empty state and ongoing empty state: the tone. First-time is welcoming and action-oriented; ongoing is neutral and helpful.

Matching Animations to Context

State Animation Style Loop?
Empty inbox Light, cheerful Yes
No search results Neutral, searching Yes
Network error Concerned, brief No
404 page Playful, curious Yes
Permission denied Clear, instructive No
Loading skeleton → empty Smooth transition No (play once)

Customizing Colors

Downloaded animations from LottieFiles will have generic colors. Edit them to match your brand using IconKing — open the .json file, click a color swatch, pick your brand color, download. No After Effects, no account required.

Convert to .lottie format at the same time — the file will be 75% smaller, which matters on slow connections where error states are more likely to appear.

Accessibility

Always pair animations with text. Screen readers don't read Lottie. Add an aria-label to the container:

<div role="img" aria-label="Empty inbox illustration">
  <DotLottieReact src="/animations/empty-inbox.lottie" loop autoplay />
</div>
Enter fullscreen mode Exit fullscreen mode

For users who prefer reduced motion:

@media (prefers-reduced-motion: reduce) {
  canvas { display: none; }
  .static-fallback { display: block; }
}
Enter fullscreen mode Exit fullscreen mode

Summary

Empty states and errors are worth investing in — users see them more than you expect. A 2-minute Lottie integration turns a dead end into a moment that either delights or guides. Start with your 404 page and work backward from there.

Top comments (0)