Improving Frontend UX: Implementing Loading States and Caching

Improving UX with Intentional Loading States

Waiting is an inevitable part of the web experience, but how an application handles that wait defines the perceived performance. In the dona-ana-frontend project, we focused on refining the user interaction model by introducing visual feedback during data fetching and implementing local caching for the navigation menu.

The Problem: Data Latency and Redundant Requests

When users interact with dynamic navigation elements, slow response times often leave users guessing if an action was registered. Furthermore, fetching the same static configuration repeatedly on every route change creates unnecessary network load. We needed a pattern that provided immediate visual cues while minimizing redundant API calls.

The Solution: Async UI States and Local Caching

By leveraging browser-side storage and conditional rendering, we can ensure the interface feels responsive even when the network is busy. Below is a conceptual look at how we manage the loading state and local storage access:

async function fetchNavigationData() {
  const cached = localStorage.getItem('nav_menu');
  if (cached) return JSON.parse(cached);

  showSpinner();
  try {
    const response = await fetch('/api/navigation');
    const data = await response.json();
    localStorage.setItem('nav_menu', JSON.stringify(data));
    return data;
  } finally {
    hideSpinner();
  }
}

This implementation checks for an existing key in localStorage before initiating a network request. If data is unavailable, it toggles a UI spinner to inform the user that content is being fetched, preventing premature interaction.

Results and Takeaways

• User Feedback: The loading indicator removes ambiguity, reducing frustration on slower connections.
• Performance: Caching drastically reduces the number of calls made to the Strapi backend for static menu data.

Getting Started

To improve your own frontend:

1. Identify UI components that trigger frequent data fetching.
2. Implement a simple loading indicator that triggers at the start of your async lifecycle.
3. Cache non-volatile data (like menus or site configurations) using localStorage to improve perceived load times.

Focus on managing user expectations through visual feedback—it turns a "broken" interface into a professional one.

Generated with Gitvlg.com