Spinner for REST API using pure JS

Question

I am calling rest API and trying to use spinner before it loads result.

It's written in pure JS so I am not able to find the right solution for it.

Here is my code. I need the preloader to load until the result is displayed. for example, before no result found i want some spinner. I have spinner coded though but I need to display it until the script runs. a console.log could work for me, I can replace the spinner script there.

Thank you

function callREST() {
  const app = document.getElementById('root');

  while (app.firstChild) {
    app.removeChild(app.firstChild);
  }

  var inputForm = document.getElementById('zip');
  var code = inputForm.value;

  var request = new XMLHttpRequest();
  request.open('GET', 'Path to API URL' + code, true);

  request.onload = function() {

    // Begin accessing JSON data here
    var responseData = JSON.parse(this.response);
    var data = responseData.Agents.Agent;

    if (request.status >= 200 && request.status < 400) {

      var zip = responseData.Agents['@ZipCode'];

      if (typeof data == 'undefined' || zip != code) {
        const noData = document.createElement('div');
        noData.setAttribute('class', 'container text-center font-weight-bold pt-3');
        noData.textContent = 'No agent available.';
        app.appendChild(noData);
      } else if (zip === code) {

        for (var i = 0; i < data.length; i++) {
          var agent = data[i];

          const card = document.createElement('div');
          card.setAttribute('class', 'result');

        };
      }

    } else {
      const errorMessage = document.createElement('div');
      errorMessage.textContent = "Something is not right!";
      app.appendChild(errorMessage);
    }
  }


  request.send();
}

<div id="wrapper">
  <main id="main">
    <form action="#" class="question-form">
      <h1>Enter your zip code</h1>
      <div class="form-group">
        <label for="zip">Zip Code</label>
        <input type="text" id="zip" class="form-control" oninput="zipData()">
      </div>
      <div class="button-holder">
        <button class="btn btn-primary" onclick="callREST()">Search</button>
      </div>
    </form>
    <div id="root"></div>
  </main>
  <div id="loader" class="loading-overlay">
    <img src="images/spinner.svg" alt="image description">
  </div>
</div>

Answer 1

So three things:

1. Set the preloader to display:none from the get go. I set it inline here.
2. Set the preloader to diplay: block when callREST() is executed. Make it the first thing after the variable declarations.
3. Set the preloader back to display:none after request.readyState === 4 (and/or whatever other condition you want to check for)

Here we go:

function callREST() {
  const app = document.getElementById('root'),
        preloader = document.getElementById('loader');

  preloader.setAttribute('style', 'display:block');

  while (app.firstChild) {
    app.removeChild(app.firstChild);
  }

  var inputForm = document.getElementById('zip');
  var code = inputForm.value;

  var request = new XMLHttpRequest();
  request.open('GET', 'Path to API URL' + code, true);

  request.onload = function() {

    // Begin accessing JSON data here
    var responseData = JSON.parse(this.response);
    var data = responseData.Agents.Agent;

    if (request.status >= 200 && request.status < 400) {

      var zip = responseData.Agents['@ZipCode'];

      if (typeof data == 'undefined' || zip != code) {
        const noData = document.createElement('div');
        noData.setAttribute('class', 'container text-center font-weight-bold pt-3');
        noData.textContent = 'No agent available.';
        app.appendChild(noData);
      } else if (zip === code) {

        for (var i = 0; i < data.length; i++) {
          var agent = data[i];

          const card = document.createElement('div');
          card.setAttribute('class', 'result');

        };
      }

    } else {
      const errorMessage = document.createElement('div');
      errorMessage.textContent = "Something is not right!";
      app.appendChild(errorMessage);
    }
  }


  request.send();

  request.onreadystatechange = function() {

      if (request.readyState === 4) {
          preloader.setAttribute('style', 'display:none');
      }
  }
}

<div id="wrapper">
  <main id="main">
    <form action="#" class="question-form">
      <h1>Enter your zip code</h1>
      <div class="form-group">
        <label for="zip">Zip Code</label>
        <input type="text" id="zip" class="form-control" oninput="zipData()">
      </div>
      <div class="button-holder">
        <button class="btn btn-primary" onclick="callREST()">Search</button>
      </div>
    </form>
    <div id="root"></div>
  </main>
  <div id="loader" class="loading-overlay" style="display:none;">
    <img src="images/spinner.svg" alt="image description">
  </div>
</div>