Optimizing Data Fetching: Adding UX Polish to React Timelines

For a long time, my tonybnya/portfolio project suffered from a "silent loading" problem. When fetching timeline data via Axios, the UI would simply hang in an empty state until the network request resolved. It felt like the application had stalled, leaving the user wondering if the site was broken or just slow.

The UX Gap

When we trigger an asynchronous data request in React, we often treat the loading state as an afterthought. We focus on the data structure and the API endpoint, but we forget the most important part of the communication channel: the visual feedback. A request that takes 500ms feels like an eternity if the interface doesn't acknowledge the activity.

Implementing a Loading State

To bridge this gap, I integrated a dedicated loading lifecycle within the data-fetching component. Instead of just setting the data to state, I implemented a simple boolean flag pattern:

const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);

useEffect(() => {
  const fetchData = async () => {
    setLoading(true);
    try {
      const response = await axios.get('/api/timeline');
      setData(response.data);
    } catch (err) {
      console.error("Fetch failed");
    } finally {
      setLoading(false);
    }
  };
  fetchData();
}, []);

By moving the setLoading state inside a finally block, we ensure that whether the request succeeds or fails, the user is never left staring at a perpetual spinner. The interface always recovers.

Why This Matters

Adding a spinner isn't just about "looking cool." It's about respecting the user's perception of time. When you provide immediate visual feedback, you anchor the user's attention. If the data takes a moment to arrive, the spinner signals that the application is working as expected, turning a perceived bug into a predictable behavior.

The Takeaway

Never leave your users guessing. If a network request is happening, show it. Always wrap your data-fetching logic in a try-finally block to manage your loading state, ensuring the UI remains interactive and transparent regardless of the outcome.

Generated with Gitvlg.com