Empty & Error States

Patterns for handling empty data, loading, and error conditions.

---

Empty States

No Results

🔍

No results found

We couldn't find any activities matching "underwater basket weaving". Try adjusting your filters.

No Data Yet

📅

No bookings yet

You haven't made any bookings yet. Start exploring activities for your kids!

First-Time User

🎉

Welcome to Juniro!

Let's get started by adding your first child to personalize activity recommendations.

---

Loading States

Skeleton Loading

Spinner Loading

Loading...

Please wait

---

Error States

Page Error (500)

😵

Something went wrong

We're having trouble loading this page. Please try again in a moment.

Not Found (404)

404

Page not found

The page you're looking for doesn't exist or has been moved.

Inline Error

⚠️

Payment failed

Your card was declined. Please try a different payment method.

---

Offline State

📡

You're offline

Check your internet connection and try again.

---

Best Practices

State	Icon	Tone	Action
Empty (no data)	Relevant illustration	Encouraging	Primary CTA to add data
No results	Search icon	Helpful	Clear filters or modify search
Error	Warning/Error	Apologetic	Retry or go back
Offline	Connection icon	Informative	Retry connection
Loading	Spinner/Skeleton	Neutral	None (automatic)

---

Code Example

// Empty state component
const EmptyState = ({
  icon,
  title,
  description,
  action
}) => (
  <div className="text-center py-12 px-6">
    <div className="text-5xl mb-4">{icon}</div>
    <h3 className="text-lg font-semibold mb-2">{title}</h3>
    <p className="text-gray-600 mb-6 max-w-sm mx-auto">
      {description}
    </p>
    {action && (
      <Button onClick={action.onClick}>
        {action.label}
      </Button>
    )}
  </div>
);

// Usage
<EmptyState
  icon="📅"
  title="No bookings yet"
  description="Start exploring activities for your kids!"
  action={{ label: "Browse Activities", onClick: () => {} }}
/>

---

See Storybook for EmptyState and ErrorBoundary components.