My jquery ui dialog is loaded via ajax with a partial view from the server. Initially, the dialog opens as a dialog-ajax-loader and then animates/grows to fit the content once the call returns.
The issue arises when the dialog content gets cached or the ajax call is too quick. This results in the content being loaded immediately into the ajax-loader-sized dialog without the ajax loader being visible at all. I have put a lot of effort into making this look great, so I can't accept this outcome. I want the ajax loader to be displayed for at least 1 second, or longer if the ajax call takes more time.
I've spent a considerable amount of time searching online for a suitable sleep() function, but it seems to come with a taboo. I decided to reach out here in hopes of getting some suggestions on how to best accomplish this.
The actual code is much more complex, but the concept goes like this:
var mydialog = $("<div></div>").dialog({...Ajax loader settings...});
var minimumTimeMet = false;
setTimeout(function( ){ minimumTimeMet = true; }, 1000);
mydialog.dialog("open"); //Open ajax loader
$.ajax({
cache: false, //This helps but not always, sometimes the request is just too fast
....
success: function(htmlContentResponse){
while(!minimumTimeMet){
//sleep here! However, thread cannot be
//blocked because the function set in setTimeout
//above must executed to change minimumTimeMet = true
//and break out of this loop.
}
mydialog.html(htmlContentResponse);
mydialog.animate({...Animate into new dialog settings ...});
}
});