Loading States

Demonstrates the transition from loading (skeleton) to empty state (no data) to populated state (real content). Shows how feedback components compose with data display.

Loading (Skeleton)

Empty State

No team members yet

Invite your first team member to get started collaborating.

Populated State

AM

Alice Martin

alice@example.com

Admin

BT

Ben Torres

ben@example.com

Editor

CH

Clara Hughes

clara@example.com

Pending

Components used

• Skeleton, Empty State
• Avatar, Badge
• Button

Key implementation details

• Loading: Skeleton placeholders match the shape of real content (circle for avatar, text bars for name/email)
• Empty: Centred layout with icon, heading, description, and a primary CTA
• Populated: List items with avatar, text, and status badge — the real content that replaces the skeleton
• Transition order in real apps: Loading → Empty (if no data) or Populated (if data exists)