unable to show a loading image during my api calls inside my enterprise wiki pages

Question

I am working on an enterprise wiki site collection inside sharepoint server 2013. and inside the Home page i added the following code snippet, to dynamically build a summary table using javascript/api calls:-

<style unselectable="on">
.table tbody tr:hover {
background-color:#eeeeea;
cursor:pointer;
}

.table th, .table td {
padding:0.5em;
}

.table tbody tr td, .table tbody tr th {
background-color:transparent;
}
</style>
<div style="padding: 5px 10px; border: 1px solid grey; width: 100%; margin-left: 20%;" unselectable="on">
<div style="text-align: left; font-size: 18px;" unselectable="on"><b unselectable="on">Plan Summary</b></div>
<div id="inserthere" style="margin-left: 50%;" unselectable="on"></div>
&nbsp;</div>

then inside my enterprise wiki page layout i added reference to the javaScript file which is going to build the table (ofcourse i do not want to render the script on edit mode that why i wrap it with <PublishingWebControls:EditModePanel PageDisplayMode="Display" runat="server"> ):-

  <PublishingWebControls:EditModePanel PageDisplayMode="Display" runat="server">
  <script src="/kb/Business/Resources/customSummary.js" type="text/javascript"></script>
  </PublishingWebControls:EditModePanel>
</asp:Content>

finally here is the customSummary.js script:-

$(document).ready(function() {
function appendinit(){
alert("first");
var htmlinit = "";
htmlinit = "<image  id= 'customloader' src= '/resources/ajax-loader.gif'></image>";
$("#inserthere").after(htmlinit+"");
return "done";
}
function getCurrentMainCategoryID(){
alert("third");
var results = "";
var html="";
html="<table class='table' style='border-collapse:collapse'><thead><tr><th style='text-align:left'></th><th style='text-align:right'>Pages</th></tr></thead><tbody>";
    var url = "/kb/Business/_api/web/lists/getbytitle('MainCategory')/items?$select=Title&$orderby=MainCategoryOrder asc";

    $.ajax({
     url: url,
     method: "GET",
     async: false,
     headers: { "Accept": "application/json; odata=verbose" },
     success: function (data) {
        if(data.d.results.length>0){


            results = data.d.results;
            for(var j2=0;j2<results.length;j2++)
            {


            var currentMainCatTitle = results[j2].Title;

    $.ajax({
     url: "/kb/Business/_api/web/lists/getbytitle('pages')/items??$select=Title,MainCategory&$filter=MainCategory eq " + "'" + currentMainCatTitle +"'" ,
     method: "GET",
     async: false,
     headers: { "Accept": "application/json; odata=verbose" },
     success: function (data) {
        if(data.d.results.length>0){
            html=html+"<tr><td>"
            + "</td>"
            + "<td style='text-align:right'>"+data.d.results.length+"</td></tr>";

        }

     },
     error: function (data) {   

     }
    });
            }


        }

     },
     error: function (data) {


     }
    });
$("#customloader").hide();
$("#inserthere").after(html+"</tbody></table>");

    return results;
}

var test = appendinit();
alert("second");
getCurrentMainCategoryID();
$("#customloader").hide();
});

now my initial plan was:-

1. Click on the Home page >> then the the loading image will be shown.
2. need to wait for a couple of seconds.
3. do the api calls.
4. hide the loading image.
5. build the dynamic table.

but now i am getting this behavioure (i added the alerts to try to understand the execution sequence):-

1. I will get alert (First)
2. I will get alert (Second)
3. I will get alert (Third)
4. wait for a couple of seconds...
5. then after that the loading image will appear for milliseconds then get hide at the same time the table being rendered..

so not sure why i am getting this behavioure ? i mean the loading image should first get rendered,, after that i have to wait for the table to get dynamically drawn ...

Answer 1

(probably) the use of async:false messes up the DOM redraw event queue.

Question: Why are you using an a sync call??

So programmers whack in

window.setTimeout(function(),0);

to force a DOM update at the right time

Long answer: read the second answer!

https://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful

---

or

You created an empty DIV for your content:

<div id="inserthere" style="margin-left: 50%;" unselectable="on"></div>

What would happen if you delete all the loader related script and put your loading image in there?