There is a huge HTML table and JS code that sorts it.
I want to show some loading icon or an overlay when the sorting code is executed.
All works fine, but there is a time gap between end of code and the actual appearance of the updated table.
My guess it that it takes some time until the browser finishes redrawing the page.
I have tried using Observer, but it fires only after the DOM modification, there is still a delay before I can see the actual updated table.
Is there any JS event that happens after the browser finishes drawing the page?
You can use the trigger to fire off events at the start and end of your processing.
If you're using jQuery it would look something like this:
function processTable(){
$(document).trigger('startProcessing', {
description: 'Enable Loader'
});
... //Processing done here
$(document).trigger('endProcessing', {
description: 'Disable Loader'
});
}
jQuery(document).on('startProcessing',enableLoaderFunction);
jQuery(document).on('endProcessing',disableLoaderFunction);
This can also be done in just JS by making sure that you use the proper event handler for the browser that is being used. Here is the documentation for handling without jQuery: https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events