Question 182521 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – display a waiting animation for await fetch

Code is below. I want to show a pop up box kind of thing during the API call which will block further interaction with the page. This is HTML page with refreshStatus being a Javascript function which invoked when the button is clicked.

        async function refreshStatus(mode)
        {
            //open a "wait...." animation here
            var response = await fetch(
                the_url,
                {
                    method: 'POST',
                    headers: {
                                'Accept': 'application/json',
                                'Content-Type': 'application/json',
                                'Access-Control-Allow-Origin': '*',
                            },
                    body: JSON.stringify(dict)
                }
            );
            //close the animation here

            const jdata = await response.json();
            ldata = jdata["results_list"];

        }
Tags:

2

Answers


  1. 0

    You can add a fullscreen div, which overlays everything on your current page:

    <div id="loading" style="position: fixed; z-index: 1000; width: 100vw; height: 100vh; top: 0; left: 0; display: flex; justify-content: center; align-items: center; display: none;">
   <span>Wait...</span>
   <!-- Loading spinner goes here -->
</div>

    then you can show and hide the container once it’s needed:

    document.getElementById("loading").style.display = "block"; // show
document.getElementById("loading").style.display = "none"; // hide
    Login or Signup to reply.
  2. 0

    You can add a fullscreen div, which overlays everything on your current page:

    <div id="loading" style="position: fixed; z-index: 1000; width: 100vw; 
height: 100vh; top: 0; left: 0; display: flex; justify-content: center; 
align-items: center; display: none;">
<span>Wait...</span>
<!-- Loading spinner goes here -->
</div>

    AND THE CODE TO FETCH DATA

    async function fetchJSONData() {
document.getElementById("loading").style.display = "block"; // show
const response = await fetch("http://example.com/movies.json");
const jsonData = await response.json();
console.log(jsonData);
//code to work with fetched data
document.getElementById("loading").style.display = "none"; // hide
}

    replace "http://example.com/movies.json&quot; with Your URL

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search