Question

Im using MVC4, Knockout and the Knockout.Mapping plugin.

On the initial load of the page, everything renders except for the part that knockout is rendering, sometimes there is a 1-4 second delay until the javascript / knockout loads this section. Initially during testing there was very little data and this really wasn’t a issue, however with lots of data its very obvious and most importantly just looks very unprofessional.

Here is our loading script

<script type="text/javascript">
    $(function () {
        ordersViewModel = new ordersViewModel('@Html.Raw(JsonConvert.SerializeObject(Model))');
        ko.applyBindings(ordersViewModel);
    });
</script>

My guess is that I can use “Display: none” or hide that section until the javascript has loaded, I would like to do something similar to Github where they have a loading dialog over the content that it is fetching.

I’m sure someone has come across this issue and has an elegant solution.

Any help would be much appreciated.

Cheers,
Sam

Answer 1

I would go the CSS route as you discussed in your question. The easiest way is to simply have two containers, one containing the data that is loading and one containing a typical loading message, perhaps with a gif indicating that loading is taking place (like those found here http://www.ajaxload.info/).

So all you need to do is put the containers one after another:

<div id="loadingMessage">
    My loading message
</div>
<div id="content" style="display: none;">
    My content
</div>

Then execute this JS once the binding has completed:

$("#loadingMessage, #content").toggle();