Durandal screensaver when working with promises

Question

My durandal based SPA makes various asynchronous async calls in the viewmodels model activation function. I am returning a promise using Q from the activation 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; } 

A similar code exists in the getAgenda function. It all works great and my screen goes over. The problem is that my getAgenda takes some time (2 to 3 seconds). The screensaver does not appear, the screen remains where it was for 2 or 3 seconds before moving on.

my splash screen is simple and shows how the site loads for the first time. Any ideas?

Answer 1

Assuming your splash screen is similar to http://durandaljs.com/documentation/Adding-a-Splash-Screen , this means a one-time splash screen that is 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 are probably looking for some kind of loading indicator. For example, in the examples, this is based on router.isNavigating , so in vm create a similar isLoading observable, which you set to true before the asynchronous call and false when you are 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> 

Answer 2

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

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