JSFiddle - React, Tailwind, and code Playground

by BenSwayne

HTML

<input type="button" id="test" value="Test" />

<div id="loading" style="display:none;">Loading...</div>

JavaScript

$('#test').click(function (e) {
    
// Show the loading indicator, then start a SYNCRONOUS ajax request
$('#loading').show().delay(100).queue(function() {
    var jqxhr = $.ajax({type:"GET",dataType:"json",url:"www.test.com",async: false}).done(function(){
        //Do your success handling here
    }).fail(function() {
        //Do your error handling here
    }).always(function() {
        //This happens regardless of success/failure
        $('#loading').hide();
    });
    $(this).dequeue();
});
    
});