Show a loader on API call in Reactjs

In this tutorial, we will learn how to show a loader component when an API call is being made in Reactjs.

Let us first create this loader component that will render when the API is in the loading state. Here I have just added text Loading, you can replace this with an image or gif.

const Loader = () => {
  return <p>Loading</p>;
};

We will use a mock server to mimic the API call that will resolve or reject at random duration. But the time the promise is not fulfilled we will update the state to be loading and once the promise is fulfilled we will set the loading to false.

Create a button on whose click we will invoke the mock server. We will wrap the logic inside the try…catch…finally block and in try, we will set the state to be loading.

The state update will trigger re-render and the loader component will be shown, Once the mock-server fulfills the promise we will update the loading state to false in the finally block and this will again trigger re-render and show the API data.

import { useState } from "react";

function getRandomBool(n) {
  const threshold = 1000;
  if (n > threshold) n = threshold;
  return Math.floor(Math.random() * threshold) % n === 0;
}

const FAILURE_COUNT = 10;
const LATENCY = 1000;

function mockServer() {
  return new Promise((resolve, reject) => {
    const randomTimeout = Math.random() * LATENCY;
    setTimeout(() => {
      if (getRandomBool(FAILURE_COUNT)) {
        reject();
      } else {
        resolve();
      }
    }, randomTimeout);
  });
}

export default function App() {
  const [isLoading, setLoading] = useState(false);
  const [apiData, setApiData] = useState("");

  const handleClick = async () => {
    try {
      setLoading(true);
      let resp = await mockServer();
      setApiData("Hello World");
    } catch (e) {
      console.error(e);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="App">
      <button onClick={handleClick}>Make api call</button>

      {isLoading ? <Loader /> : <p>{apiData ? "Api call complete" : ""}</p>}
    </div>
  );
}

const Loader = () => {
  return <p>Loading</p>;
};