JSFiddle - React, Tailwind, and code Playground

HTML

<button id='start_call'>Refresh</button>
<div id='loading'></div>

CSS

img {
    width: 100px;
}

JavaScript

/*This makes the timeout variable global so all functions can access it.*/
var timeout;

/*This is an example function and can be disreguarded
This function sets the loading div to a given string.*/
function loaded() {
    $('#loading').html('The Ajax Call Data');
}

function startLoad() {
    /*This is the loading gif, It will popup as soon as startLoad is called*/
    $('#loading').html('<img src="http://rpg.drivethrustuff.com/shared_images/ajax-loader.gif"/>');
    /*
    This is an example of the ajax get method, 
    You would retrieve the html then use the results
    to populate the container.
    
    $.get('example.php', function (results) {
        $('#loading').html(results);
    });
    */
    /*This is an example and can be disreguarded
    The clearTimeout makes sure you don't overload the timeout variable
    with multiple timout sessions.*/
    clearTimeout(timeout);
    /*Set timeout delays a given function for given miliseconds*/
    timeout = setTimeout(loaded, 1500);
}
/*This binds a click event to the refresh button*/
$('#start_call').click(startLoad);
/*This starts the load on page load, so you don't have to click the button*/
startLoad();