DEV Community

Vaishnav
Vaishnav

Posted on

46 5

Displaying loading animation on Fetch API calls

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

HTML

Let's start with html.

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

Stylesheet for loader

Working with Javascript

JS First part

In function displayLoading():

  • loader.className = "display"; this will add display class to
    <div id="#loading"></div>, which turn visibility: visible;

  • We are using setTimeout to hide loading animation after 5 second. Sometimes we may get late response, then timeout time should be increased.

Now, when displayLoading() called it will display loading animation and when hideLoading() called it will hide loading animation setting visibility: hidden;

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.

JS second part


Here's the pen.

Hey there, I'm #codenewbie, started documenting my journey of learning. Any suggestions are welcome

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (4)

Collapse
 
mohamedmagdey profile image
Mohamed-Magdey

It will be better to use

display: none

instead visibility because right now the element still exist.

Collapse
 
shub78910 profile image
Shubham Hirakki

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?

Collapse
 
rahul1116 profile image
Rahul Ravindran

You're right. In that case all you need to do is store the timer id which is returned by the setTimeout in 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 hideLoading()

clearTimeout( timerId ) // This will clear the timer and the .display class is anyway removed
Enter fullscreen mode Exit fullscreen mode

But in case of late response, you can get rid of the setTimeout logic altogether and it'll work fine

Collapse
 
mukadas profile image
Mukadas Maltiti

Thanks.
I was overthinking this. Thought I needed to get a pending state status from the fetch api in order to display the load animation

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay