Question

I have a helper inside a partial that I am loading something like this:

public ActionResult TimeLine(Guid documentId)
{
//This code takes no time to load 
var document = _someService.GetById(documentId);

return PartialView(document);
}

The TimeLine partial view holds a custom helper that takes a while to process. I am wondering what is a good way to show some sort of loading message while the helper is being built. I have tried hiding / showing a div, but since the server call for the helper runs first, that is pointless.

One thought is to possibly load all the data for the helper, upfront, which may allow me to show / hide something while it loads the data?

Answer 1

In the main view show a loading image in the container div and then using jQuery load to lod the partial view to it on document ready.

Main View

<div id="partialViewContainer">
   <img src="loading.gif" alt='loading'/>Loading...
</div>

Script

$(function(){
   var docId=$("DocumentID").val(); // read the id from some hidden input
   $("#partialViewContainer").load("controller/TimeLine/"+docId);

});