Handling Loading and Empty States

The Importance of Feedback: Implementing Loading States

As a UI/UX designer, you know that perceived performance is often more important than actual performance. Showing a user that the system is working on their request is fundamental to a good experience. This is typically done with loading indicators like spinners or, more effectively, with skeleton screens.

The basic logic for implementing any loading state is the same:

1. Before you start the fetch request, you signal that the loading process has begun.
2. You display a placeholder (a spinner, a skeleton, or just text).
3. Once the fetch request completes (either with data or an error), you signal that loading is finished and hide the placeholder to show the final result.

Let's start with a simple text-based loading indicator. The following article demonstrates a straightforward way to achieve this using vanilla JavaScript.

The article provides a solid starting point, but we can make it more robust. A try...catch block, which you learned about for error handling, can be combined with a finally block to ensure the loading indicator is always hidden, regardless of whether the fetch succeeds or fails.

// A more robust pattern
showLoadingIndicator();

try {
  const response = await fetch(URL);
  if (!response.ok) throw new Error('Network response was not ok');
  const data = await response.json();
  // ... display the data
} catch (error) {
  // ... display an error message
} finally {
  // This block runs no matter what, after the try or catch completes.
  hideLoadingIndicator();
}

This try...catch...finally pattern is a cornerstone of professional frontend development. It ensures your UI doesn't get stuck in a permanent loading state if an error occurs.

A Better User Experience: Skeleton Screens

While a spinner provides feedback, a skeleton screen takes it a step further. It's a placeholder that mimics the layout of the content that is about to load. This creates the perception that the page is loading faster and tells the user what kind of content to expect.

As a designer, you've likely created these placeholders in Figma. The goal in code is to show this skeleton UI while the real data is being fetched.

The video below, while using React (which we'll start next month), brilliantly demonstrates the concept of building and using a skeleton loader. Focus on the "what" and "why," not the specific syntax for now.

Handling Success with No Data: The Empty State

What happens if the API call is successful, but there's simply no data to show? For instance, a new user with no to-do items, or a search that yields no results. Displaying a blank area is a missed opportunity. A well-designed empty state confirms that the app is working correctly and can guide the user on what to do next.

The logic is simple: after the data has loaded successfully, and before you try to display it, you check if the data set is empty. For an array, this is as simple as checking if its length is 0.

This article provides a perfect, practical example within a vanilla JavaScript to-do application.

Bringing It All Together: The Data-Fetching State Machine

You've now seen how to handle three critical scenarios: loading, success (with or without data), and errors. Thinking of these as a "state machine" is a powerful mental model that you'll use throughout your career.

At any given time, your component is in one of these states:

1. Loading: An API request is in progress.
2. Error: The request failed.
3. Success: The request succeeded.
   • Empty: The data returned is empty (e.g., data.length === 0).
   • Ideal: The data returned is ready to be displayed.

The video below explains this entire flow using three state variables: isLoading, error, and the data itself. It's a masterclass in structuring asynchronous UI logic.

With this logic, you can provide your AI co-pilot with much more powerful prompts. Instead of just "fetch data and show it," you can describe the entire user experience:

"Create a function to fetch user profiles. While loading, show a skeleton UI. If an error occurs, display an alert message. If the fetch is successful but no profiles are returned, show a message that says 'No users found.' Otherwise, render the list of profiles."

Conclusion

In this lesson, you've moved beyond simply fetching data to managing the entire user experience around that process. By implementing loading and empty states, you are ensuring the user is never left confused or staring at a blank screen. This is a direct application of your UX skills in a coding context and is a hallmark of a great Design Engineer.

Key Takeaways:

• Always provide feedback during asynchronous operations. A simple loading state tells the user that the system is working.
• Skeleton screens are a superior loading pattern that manages user expectations and improves perceived performance.
• A successful API call with no data requires an empty state to confirm the app is working and to guide the user.
• The try...catch...finally pattern is a robust way to handle the full lifecycle of a data request, ensuring your UI state is always correct.
• Thinking in terms of states (Loading, Error, Success/Empty, Success/Data) allows you to build predictable and user-friendly interfaces.

In our next module, we will make a major leap. We'll leave vanilla JavaScript behind and enter the world of React. You'll see how concepts like components, state, and props allow us to build complex, interactive user interfaces in a much more organized and scalable way. The skeleton screen video gave you a small taste—get ready for the full experience