Loading State

Problem

Users click buttons and see no feedback, wondering if the app is broken or if they should click again. Interfaces flash from empty to full instantly, creating jarring visual jumps. Users can’t tell whether data is loading, failed to load, or if there’s simply nothing to show.

Solution

Display feedback while asynchronous operations complete so users know the application is working. This prevents confusion and abandonment during data fetching or processing.

Example

This example demonstrates managing loading state for an async data fetch, showing a spinner while loading and displaying content when ready.

// Framework-agnostic loading state management
class UserProfile extends HTMLElement {
  constructor() {
    super();
    // Initialize with loading state true
    this.loading = true;
    this.user = null;
  }

  async connectedCallback() {
    // Show initial loading state
    this.render();
    const userId = this.getAttribute('user-id');

    try {
      // Fetch user data asynchronously
      this.user = await fetchUser(userId);
    } finally {
      // Always set loading to false, even if fetch fails
      this.loading = false;
      // Re-render with loaded content
      this.render();
    }
  }

  render() {
    // Show spinner while loading
    if (this.loading) {
      this.innerHTML = '<div class="spinner">Loading...</div>';
    } else {
      // Show user data once loaded
      this.innerHTML = `<div>${this.user.name}</div>`;
    }
  }
}

Benefits

• Provides feedback that the application is working, reducing user confusion.
• Prevents users from clicking repeatedly or abandoning the operation.
• Improves perceived performance by acknowledging user actions immediately.
• Makes it clear when data is loading versus when there’s no data to show.

Tradeoffs

• Adds visual complexity with spinners and loading indicators.
• Can be jarring if loading states flash too quickly for fast operations.
• Requires additional state management to track loading status.
• May need skeleton screens or progressive loading for better UX.