Durandal splash screen when working with promises

Question

My durandal based SPA makes various async ajax calls in the activate function of the viewmodels. I am returning a promise using Q from the activate function.

 function activate(){
      return Q.fcall(['getPersons', 'getAgenda']);
 }

 function getPersons(){
      var defer = Q.defer();
      $.ajax({
         //omitting most of the settings
         success: function(data){
              defer.resolve(data);
         },
         error: function(xhr, status){
              defer.reject(status);
         }
      });

     return defer.promise; 
 }

Similar code exists in the getAgenda function too. All this works fine and my screen transitions in. The trouble is, my getAgenda takes a while (2 to 3 seconds). The splash screen does not appear, the screen stays where it was for the 2 or 3 seconds before transitioning in.

my splash screen is simple and does show the very first time the site loads. Any ideas?

Poleax

Answer 1

Assuming your splash screen looks similiar to http://durandaljs.com/documentation/Adding-a-Splash-Screen, then this is meant as a one time splash screen that gets overwritten in app.start.

<div id="applicationHost">
    <div class="splash">
        <div class="message">
            Durandal Starter Kit
        </div>
        <i class="icon-spinner icon-2x icon-spin active"></i>
    </div>
</div>

You're probably looking for some kind of loading indicator. E.g in samples this is implemented based on router.isNavigating, so in you vm create similiar isLoading observable, which you set to true before the async call and to false when done.

https://github.com/dFiddle/dFiddle-1.2/blob/gh-pages/App/samples/shell.html#L13

<div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
    <i class="icon-spinner icon-2x icon-spin"></i>
</div>

Achelous

Answer 2

I wanted to integrate Pacejs into durandal navigation, and it ended up pretty easy thanks to router.isNavigating

Here is the gist https://gist.github.com/volak/4aca442373b4216a52b5

Lippert