How to add loader or spinner using react hooks while fetching data from APIs.

Thank you for reading my last blog APIs the first step, in this blog we will look at how to add loader and spinner in react using Hook while fetching Data from API.

Loader or spinner is a simple gif used to show the user that data is being loaded in the background. In this blog, we will explore one of the fastest ways to add a cool loader to your react app.

Table of content

Why do you need a loader
Where to get beautiful loaders
Steps to implement them in the react App
Conclusion
reference

Why do you need a beautiful loader or spinner?

Access data most time takes few seconds especially apps that call database or that make API calls, and sometimes the user might have network challenges from his/her network provider. Now, this is where loader comes up, giving your users something to hang on to while they wait for their data to come up.

Where to get beautiful Loader or spinner;

There are differences between the old type of loader and spinner and the new and improved ones, getting the beautiful ones displaying on your app while the user waits is very catchy. Here we will see the top websites to get the best spinner and loader gif.

Steps to implement this to your react app;

In this blog, we will build our project using Game of thrones API, the loading screen is dynamic; it changes every single time you request data from the API. You can easily change the loader if you see any better, we have 20+ cool loader gif in this project pull the code on Github you are free to create a branch and add more stuff 👍 .

Run npx create-react-app app-name in your project folder and clean up the react folders;
Install Axios using npm install Axios import Axios, Axios is an HTTP library it returns a promise, will be making request with it.
In the src folder, I created the Home folder in my components folder that contains the header.js that holds my logo and the loader.js file that holds the loading image.
Then I create Housefolder.js in the components, this folder holds all items that will get from the API, we import it in our App.js file
Then I create an image folder in the components, this folder holds all the images used for the project.

Here we will be focusing on the HouseNames.js and App.js files because this is where the actions are, we are going to make use of two react Hooks useState and useEffect. In our App.js we will use the arrow function for our App, create a constant utilize our useState.

In the loading useState we set it as true to enable it to load before the data appears.

const App = () => {

  const [items, setItems] = useState([]) //this will represent the items that will be coming from the API
  const [isLoading, setLoading] = useState(true)

To make a request our Axios needs to go into useEffects, since we are using Axios we need to import it in the App.js folder, we will be using only async not .get and .then, we right a function of getItems

useEffect (() => {
    const getItems =  async () =>{
      const result = await axios ()
}, []) //when we use useEffect we put dependency as a second paramiters

Then we copy paste the base url or endpoint in axios to request for data from the API, when we get data back setItem from the API we set IsLoading to false then call back our getItems.


      const result = await axios (
        `anapioficeandfire.com/api/houses` //Endpoint and parameter or base Url
        )
      console.log(result.data)

      setItems(result.data) //sets the data to appear 
      setLoading(false) //stop loading when data is fetched
    }
    getItems()

In the return we will pass isLoading as props so it will change from true to false once is called setLoading(false), we are simply taking our global state in the App.js passing it down as props in our HouseNmaes.js .

  return  ( <div className="container">
    <Header/>
    <HouseNames isLoading ={isLoading} items = {items}/>
  </div> )

}

after the above implementation, our App.js file will look like this,

import React, {useState, useEffect} from 'react';
import axios from 'axios'
import Header from './components/home/Header'
import HouseNames from './components/House/HouseNames'
import './App.css';



const App = () => {

  const [items, setItems] = useState([]) //this will represent the items that will be coming from the API
  const [isLoading, setLoading] = useState(true)

  useEffect (() => {
    const getItems =  async () =>{
      const result = await axios (
        `anapioficeandfire.com/api/houses` //Endpoint and parameter or base Url
        )
      console.log(result.data)

      setItems(result.data)//sets the data to appear 
      setLoading(false) //stop loading when data is fetched
    }
    getItems()

  }, [])//when we use useEffect we put dependency as a second paramers

  return  ( <div className="container">
    <Header/>
    <HouseNames isLoading ={isLoading} items = {items}/>
  </div> )

}

export default App;

Here in the HouseNmaes.js file, import the loader.js. We are catching the props we passed from the App.js using destructuring not props.items. In the return we have to check if is still loading or not using tinary function, then we put in the Loader component, add className from the app.css to style how the data will display.

Then we map out our items that are going to appear, it also loops through and shows any data we requested, at the end this is how it will look like.

import React from 'react';
import Loader from '../home/Loader'

const HouseNames = ({ items, isLoading }) => {
    return isLoading ? (   //Checkif if is loading
    <Loader/>
    ) : (
    <section className="frame"> 
    {items.map((item)  => (   //here we map through the items
        <h1>{item.name}</h1>
    ))}
    </section>
    )

}

export default HouseNames

Conclusion

Adding the loaders are one of the fun ways of making users come back to your site, so number one priority of a developer is to make the users keep coming back as the say first impression matters a lot. let follow each other on Twitter me up on Twitter 👍.