Empty & Loading States
Patterns for handling empty data, loading, and error states gracefully.
Empty States
Show helpful messaging when there's no data to display. Include a clear action.
No devices yet
Get started by adding your first device to monitor energy production.
No Search Results
When a search or filter returns no results, provide suggestions.
No results found
We couldn't find any devices matching "solar panel xyz". Try adjusting your search or filters.
Loading Skeletons
Use skeletons that match the shape of the content being loaded.
Loading Animation
Use the branded PixelGrid animation for loading states. Available in multiple sizes and patterns.
Loading devices...
Progress Indicator
Use progress bars for operations with known duration.
Estimated time remaining: 2 minutes
Error States
Provide clear error messages with recovery actions.
Connection failed
Connection lost
We're having trouble connecting to the server.
Offline / Device Unavailable
Handle cases where devices or data are temporarily unavailable.
Solar Inverter
Last seen 2 hours ago
Not Found (404)
Friendly message when a resource doesn't exist.
Page not found
The page you're looking for doesn't exist or has been moved.
Best Practices
- Always provide a clear action in empty states ("Add device", "Clear filters")
- Use skeletons that match the shape of real content
- Keep loading messages short and informative
- Show progress indicators for operations over 2 seconds
- Error messages should explain what went wrong AND how to fix it
- Provide "Try again" buttons for recoverable errors
- Use muted/dashed styles for offline or unavailable items
- Don't show spinners for less than 300ms (use skeleton instead)
- Consider optimistic updates to avoid loading states
- Test your empty states - they're often the first thing users see