In web development, one of the most important part is to use REST api. When I start working on api with vanilla JS, I noticed small time difference between call and response. It's good practice to show end user something is happening after his interaction with website.
So here's the guide of showing loading animation on fetch api calls with vanilla JS.
Let's get started
Let's start with html.
<textarea> to get user input.
<button> to submit data.
<h1> to display response.
We are displaying loading animation using
<div id="loading"></div>. This element is hidden by default. We are going to manipulate it, to show or hide it according our requirement.
Creating loader animation CSS
loader.className = "display";this will add display class to
<div id="#loading"></div>, which turn
We are using
setTimeoutto hide loading animation after 5 second. Sometimes we may get late response, then timeout time should be increased.
displayLoading() called it will display loading animation and when
hideLoading() called it will hide loading animation setting
Now for remaining JS
This part is straight forward.
fetchHandler() to fetch data from api.
url I'm using is dummy url which only return 'Testing, you are' for any input.
Here's the pen.
Hey there, I'm #codenewbie, started documenting my journey of learning. Any suggestions are welcome
Top comments (4)
But then, the animation time will be irrespective of the actual loading time, that is, 5 seconds fixed. What if it takes longer or shorter time to load?
You're right. In that case all you need to do is store the timer id which is returned by the
setTimeoutin a global variable. Later if the response comes earlier than 5 secs, you just need to clear out the timer by adding one line in
But in case of late response, you can get rid of the
setTimeoutlogic altogether and it'll work fine
It will be better to use
visibilitybecause right now the element still exist.
I was overthinking this. Thought I needed to get a pending state status from the fetch api in order to display the load animation