JSFiddle - React, Tailwind, and code Playground

by Helmut Granda

HTML

<script src="https://www.ni.com/niassets/jquery/js/jquery.min.js"></script>
<script src="https://www.ni.com/niassets/jquery/js/jquery-migrate-1.2.1.min.js"></script>
<script src="https://www.ni.com/niassets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://www.ni.com/niassets/jquery/jqueryui/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://www.ni.com/niassets/bootstrap/css/bootstrap.min.css">
<script src="https://www-dev.ni.com/niassets/ni.min.js"></script>
<link rel="stylesheet" href="https://www.ni.com/niassets/jquery/jqueryui/css/jquery-ui.min.css">
<link rel="stylesheet" href="https://www.ni.com/niassets/ni.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 ni-margin-3x">
      <h3>
        Testing spinner with delays
      </h3>
    </div>
    <div class="col-md-12 ni-margin-3x">
      <a id="twoseconddelay" class="ni-btn ni-btn-commerce" href="#" role="button">Request with 2 second delay</a>
    </div>
    <div class="col-md-12 ni-margin-3x">
      <a id="fiveseconddelay" class="ni-btn ni-btn-commerce" href="#" role="button">Request with 5 second delay</a>
    </div>
    <div class="col-md-3">
      <div class="spinner-icon hidden"></div>
      <div id="ajax"></div>
    </div>
  </div>
</div>

JavaScript

/* Set Listeners */

$("#twoseconddelay").click(function() {
  resetResponse();
  setAjaxTest(twoSecondDelayData);
})

$("#fiveseconddelay").click(function() {
  resetResponse();
	setAjaxTest(fiveSecondDelayData);
})

/* Helpers */
var setAjaxTest = function(requestData) {
  $.ajax({
    type: 'POST',
    dataType: 'json',
    url: '/echo/json/',
    data: requestData,
    success: function(data) {
      $(".spinner-icon").addClass('hidden');
      $('#ajax').html(data.response);
    }
  });
}

var json2SecondDelayData = {
  "response": "2 second delay response successful"
};

var json5SecondDelayData = {
  "response": "5 second delay response successful"
};

var twoSecondDelayData = {
  json: JSON.stringify(json2SecondDelayData),
  delay: 2
}

var fiveSecondDelayData = {
  json: JSON.stringify(json5SecondDelayData),
  delay: 5
}

var resetResponse = function() {
  $('#ajax').html("");
  $(".spinner-icon").removeClass('hidden');
}