Durandal: Showing a 'LOADING...' during composition

durandal, durandal-2.0

Solution

This begs for a comment of 'what have you tried?' but given that I could see the benefit of this for future users I wanted to throw in my $0.02 -

The splash displays on your screen until Durandal loads up the application and replaces the div with `id="applicationHost"` 's content with the shell view and the subsequent views that are loaded. If you wanted to make this a re-usable component one thing that you could do is to take that `Html.Partial` view that is being loaded and create your own view inside of your `app` folder in your Durandal project.

For example you would create a new HTML view inside of your app folder -

splashpage.html

<div class="splash">
    <div class="message">
        My app
    </div>
    <i class="icon-spinner icon-2x icon-spin active"></i>
</div>

And then compose it from your shell -

<div data-bind="if: showSplash">
    <!-- ko compose: 'splashpage.html' -->
    <!-- /ko -->
</div>

And in your view model you would toggle the observable showSplash whenever you want to show / hide it -

var showSplash = ko.observable(false);

var shell = {
    showSplash: showSplash
};
return shell;

And you could call that from your activate methods inside your other view models like this -

define(['shell'], function (shell) {

    function activate() {
        shell.showSplash(true);
        // do something
        shell.showSplash(false);
    }

});

Problem

Original source