UI Design Best Practices for Loading, Error & Empty States in React

Learn how to handle every state in your React application--from loading skeletons to error boundaries to helpful empty states that guide users forward.

Why UI States Matter

Every React application encounters moments where the expected content cannot be displayed--whether data is loading, an error occurred, or there's simply no data to show. How you handle these states directly impacts user experience, retention, and perceived performance.

Poorly handled states lead to user frustration, increased bounce rates, and diminished trust. Well-designed state handling demonstrates professionalism, provides clear guidance, and transforms potential friction points into opportunities for engagement. According to LogRocket's research on UI best practices, users who encounter helpful error messages and clear empty states are significantly more likely to complete their goals.

The three primary state categories--loading, error, and empty--each serve distinct purposes and require different design approaches. Understanding these patterns is essential for building professional web applications that users trust. When combined with robust SEO strategies, well-designed state handling can improve both user satisfaction and search visibility.

Loading States: Managing Wait Times Effectively

Understanding Perceived Performance

Loading states do more than indicate activity--they shape how users perceive your application's speed. Research shows that perceived wait time differs significantly from actual wait time. Users report shorter waits when they receive continuous feedback.

The key insight is that uncertainty amplifies perceived wait time. When users stare at a blank screen, each second feels longer. By providing visual feedback, you reduce uncertainty and create the impression of a faster, more responsive application.

Skeleton Screens: The Modern Loading Standard

Skeleton screens have emerged as the gold standard for loading states. Unlike traditional spinners, skeleton screens preview the layout and content structure that will appear once loading completes. This approach allows users to process the anticipated content structure while waiting.

Key implementation principles:

  • Match the final content layout precisely
  • Include accurate spacing, text lengths, and placeholders
  • Use subtle shimmer animations that indicate activity without distraction
  • Best for loads over 300ms; avoid for very quick loads

Progress Indicators and Spinners

While skeleton screens excel for content preview, traditional indicators remain valuable for specific use cases:

  • Progress bars: Ideal for operations with known durations or stages
  • Circular spinners: Work well in compact spaces or button-embedded states
  • Percentage indicators: Help when users need to know completion status

React Suspense and Concurrent Features

React's Suspense API provides sophisticated mechanisms for managing loading states at the component level. Suspense allows components to "suspend" rendering while async operations complete, with declarative fallback UI. For more on React's rendering patterns, see our guide on React windowing vs component recycling. For applications requiring intelligent loading strategies, consider how AI-powered optimization can predict and prefetch content.

React Suspense with Skeleton Loading
1import React, { Suspense } from 'react';2 3function SkeletonCard() {4 return (5 <div className="skeleton-card">6 <div className="skeleton skeleton-image"></div>7 <div className="skeleton-content">8 <div className="skeleton skeleton-title"></div>9 <div className="skeleton skeleton-text"></div>10 <div className="skeleton skeleton-text short"></div>11 <div className="skeleton skeleton-button"></div>12 </div>13 </div>14 );15}16 17function App() {18 return (19 <div className="app">20 <Suspense fallback={<SkeletonGrid />}>21 <ProductList />22 </Suspense>23 </div>24 );25}

Error States: Communicating Problems Effectively

Error Boundary Implementation

Error boundaries represent a fundamental React pattern for gracefully handling JavaScript errors. They catch rendering errors in child components, preventing the entire application from crashing while providing fallback UI.

Error boundaries catch errors in:

  • Rendering methods
  • Lifecycle methods
  • Constructors of child components

Error boundaries don't catch:

  • Event handlers
  • Asynchronous code
  • SSR rendering

For comprehensive error handling strategies, our guide on UX error prevention examples provides additional patterns for preventing errors before they occur.

User-Friendly Error Messaging

The difference between helpful and frustrating errors lies in clarity, actionability, and tone. Effective error messages:

  • Explain what happened in user-understandable language
  • Provide clear next steps or recovery options
  • Maintain a helpful rather than technical tone

Before and After:

  • ❌ "500 Internal Server Error"
  • ✅ "We're having trouble connecting to our servers. Please try again in a moment."

Retry Mechanisms and Recovery Paths

Every error state should provide users with a clear path forward:

  • Retry functionality for transient errors
  • Alternative actions when retry won't help
  • Escalation paths for persistent issues

Design retry buttons with clear labels: "Try Again," "Reload Page," or "Refresh Results" guide better than generic "Retry" labels. Toptal's UX research emphasizes that actionable recovery paths significantly reduce user abandonment.

React Error Boundary Implementation
1import React, { Component } from 'react';2 3class ErrorBoundary extends Component {4 state = { hasError: false, error: null };5 6 static getDerivedStateFromError(error) {7 return { hasError: true, error };8 }9 10 componentDidCatch(error, errorInfo) {11 logErrorToService(error, errorInfo);12 }13 14 render() {15 if (this.state.hasError) {16 return <ErrorFallback error={this.state.error} />;17 }18 return this.props.children;19 }20}21 22function ErrorFallback({ error, resetErrorBoundary }) {23 return (24 <div className="error-container">25 <h2>We're sorry, something went wrong</h2>26 <p>{error?.message || 'An unexpected error occurred'}</p>27 <button onClick={resetErrorBoundary}>Try Again</button>28 </div>29 );30}

Empty States: Guiding Users Through Absence of Content

Types of Empty States

Empty states fall into four distinct categories, as outlined in PatternFly's component documentation:

  1. First-use: When users encounter a feature before any content exists
  2. Cleared: When users intentionally remove or complete all content
  3. No-results: When searches or filters yield no matches
  4. Error-related: When failures prevent content from loading

First-Use Empty States

First-use empty states are critical onboarding opportunities. Rather than generic "no content" messaging:

  • Illustrate what the feature will display once populated
  • Explain the feature's value and use cases
  • Provide a clear path to creating the first item

Effective first-use states combine visual demonstration with actionable guidance. For e-commerce applications, see how faceted filtering creates better experiences when results exist.

No-Results States

No-results states require particular care because users have already expressed intent. These states should:

  • Show the search query or filter criteria used
  • Explain why nothing matched
  • Suggest alternatives or modifications
  • Provide clear paths to adjust the search

Actionable Empty States

The most effective designs provide clear, actionable next steps. Users should never wonder what to do next--include:

  • Visible, prominent action buttons
  • Context for each action
  • Appropriate actions for the state type

Avoid generic "Refresh" buttons when more specific actions are possible. The Carbon Design System recommends tailoring actions to the specific empty state type for maximum user guidance.

First-Use and No-Results Empty States
1function FirstUseEmptyState({ onCreateFirst }) {2 return (3 <div className="empty-state first-use">4 <div className="empty-illustration">5 <EmptyStateIcon />6 </div>7 <h2>Get Started with Your Dashboard</h2>8 <p>9 Your dashboard will display key metrics and insights about your projects.10 Create your first project to see your data come to life.11 </p>12 <div className="empty-actions">13 <button className="primary" onClick={onCreateFirst}>14 Create Your First Project15 </button>16 <button className="secondary" onClick={() => window.open('/help')}>17 Watch Tutorial18 </button>19 </div>20 </div>21 );22}23 24function NoResultsState({ query, onClearSearch, onViewAll }) {25 return (26 <div className="empty-state no-results">27 <SearchIcon />28 <h2>No Results for "{query}"</h2>29 <p>30 We couldn't find any items matching your search.31 Try adjusting your filters or search terms.32 </p>33 <div className="empty-actions">34 <button onClick={onClearSearch}>Clear Search</button>35 <button onClick={onViewAll}>View All Items</button>36 </div>37 </div>38 );39}

Implementation Best Practices

Centralized State Management

For complex applications, implement centralized state management patterns:

  • Use React Query, SWR, or Apollo Client for data fetching states
  • Create reusable <LoadingState>, <ErrorState>, and <EmptyState> components
  • Ensure consistency across features while allowing customization

For state management with persistent storage, our guide on React Native's AsyncStorage covers similar patterns for mobile applications.

Component Composition Strategies

Build composable state components:

function StateWrapper({ isLoading, error, data, children }) {
 if (isLoading) return <LoadingState variant="skeleton" />;
 if (error) return <ErrorState error={error} onRetry={refetch} />;
 if (!data || data.length === 0) return <EmptyState onAction={createNew} />;
 return children;
}

Accessibility Considerations

All state components must be fully accessible:

  • Loading states: Use aria-live regions for screen readers
  • Error messages: Proper ARIA roles and form control associations
  • Empty states: Logical heading structures and tab order
  • Keyboard accessibility: Visible focus indicators on all interactive elements

For accessibility tooling recommendations, explore our guide on Figma accessibility plugins.

Key Takeaways

  1. Loading states should manage expectations and reduce perceived wait time
  2. Error states need clear messaging and actionable recovery paths
  3. Empty states should educate, guide, and encourage action
  4. All states must maintain accessibility standards
  5. Consistency through reusable components ensures cohesive experience

Well-designed states demonstrate care for users throughout every moment of their journey. Partner with our web development team to implement these patterns across your application.

Frequently Asked Questions

Ready to Build Better React Applications?

Our team specializes in creating exceptional user experiences with modern React patterns and best practices.

Sources

  1. LogRocket: UI best practices for loading, error, and empty states in React - Comprehensive React-specific implementation patterns
  2. Toptal: Empty States - The Most Overlooked Aspect of UX - UX design principles and empty state categorization
  3. PatternFly: Empty State Component - Enterprise-grade component specifications and variants
  4. Carbon Design System: Empty States Pattern - IBM's design patterns and best practices