How to show Loading wrapper in ReactJS / React Native while api call !

No Introduction, Let's cut to the chase

You have an API and a component to show with data provided by API. Now the problem is, that component gets called before the API call is completed resulting in throwing an undefined or null error while calling children keys in a component.

To Resolve this we use something called a Loading Wrapper. Now, this method works on both React and React Native as it uses common useState and Reacts LifeCycles to work.

 

Step 1 - Maintaining a Loading State

Let's start by making a loading state to check and update our application whenever the loading starts and ends.

const [isLoading, setIsLoading] = useState(false)

Now we will update it to true when the call starts and false when the call ends.

 

Step 2 - Calling APi with Loading State

In this step, we will simply update the isLoading state to true and false to tell our application the current loading condition.

useEffect(()=>{
     getData()
},[])

const [isLoading, setIsLoading] = useState(false)
const [data, setData] = useState(null)

const getData = async()=>{
   setIsLoading(true)

   await axios.get(url).then((res)=>{
           setIsLoading(false)
           setData(res.data)
  })
  .catch(err=>{
           setIsLoading(false)
  })
}

What the hell did you do here ????????

Well I started by setting isLoading to true when our API call started ( just before Axios) and then to false when our promise finally ended ( either with success or failure )

 

Step 3 - Showing Loading wrapper based on this api call

Now our application knows if the API is loading or not, let's move to the rendering part.

We will use conditional rendering to render the diff UI based on diff cases.

return(
   !isLoading ?
      data!==null?
        <YourComponent data={data} />
      :
       <h1> Can't connect to server ! </h1>
   :
   <span> Loading... </span>
)

Here, we are first checking is isLoading is false, which means the API call has ended. So we will move to render our component. If isLoading is true it will show a span tag with text as Loading...

Then, we are checking if data!==null which means the API call has been success full and populated with backend data. If it is null that means the API call is failed and there is some error in the API call.

It is not really a part of Loading Wrapper but it is most commonly used with loading states to avoid crashes and undefined errors.

So Now our loading wrapper is ready, and each time the getData() function gets called it will again trigger the loading and our render function will act accordingly.

 

❤️🧑🏻‍💻Thanks for reading , If you liked this blog please drop a like and comment !