MS CRM HTML webResources loading screen

Question

I am working on editable grid for MS CRM 2016. I made HTML web resource that retrieves records from CRM system and displays them in table that is dynamically created in the generateTable() function. This can take a bit long, and I would like to display loading gif while generateTable() function is doing it's thing. I am using XrmServiceToolkit for retrieving, deleting, updating and creating new records.

loadingScreen() function hides div that contanis the table and shows the div with gif image in it... stopLoadingScreen() does the opposite.

My code looks like this, but the loading gif is not showing at all...

function onLoad(){
            loadingScreen();
            try{
                generateTable();
            }
            catch(err){
                alert(err.toString());
            } finally {
                stopLoadingScreen();
            }
        }

Is there something that I am missing? Are there any solutions to this (maybe with jQuery or smth)?

Answer 1

Assuming generateTable() is an async function, loadingScreen and stopLoadingScreen functions get called one after the other in quick succession, so you won't really see you animated gif.

If generateTable(); function is what is using XrmServiceToolkit method to retrieve records, your stopLoadingScreen(); function should be inside a callback, handle your try catches inside the generateTable function.

function onLoad() {
  loadingScreen();
  generateTable(function() {
      stopLoadingScreen();
  });
}