Durandal: At what stage in lifecycle should router.isNavigating deactivate? - durandal

Question

sigh It's becoming the "daily question" routine with me, sorry!
I have a nav.html that contains:
<div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
<i class="icon-spinner icon-2x icon-spin"></i>
</div>
Trouble is, it never deactivates! The spinner always stays rotating, basically.
I've put in debugs in the viewmodels like in the Durandal html samples page:
var vm = {
activate: activate,
//refresh: refresh,
//sessions: sessions,
title: 'My App Home Page',
activate: function () {
system.log('Lifecycle : activate : home');
},
binding: function () {
system.log('Lifecycle : binding : home');
return { cacheViews: false }; //cancels view caching for this module, allowing the triggering of the detached callback
},
bindingComplete: function () {
system.log('Lifecycle : bindingComplete : home');
},
attached: function (view, parent) {
system.log('Lifecycle : attached : home');
},
compositionComplete: function (view) {
system.log('Lifecycle : compositionComplete : home');
},
detached: function (view) {
system.log('Lifecycle : detached : home');
}
//viewAttached: viewAttached
};
and in my Chrome dev console I have:
Lifecycle : bindingComplete : home system.js:73
Lifecycle : attached : home system.js:73
Lifecycle : compositionComplete : home system.js:73
...and I would have thought that "compositionComplete" would have triggered the end of "router.isNavigating", no?
The nav.html is composed in my shell.html file as so:
<header>
<!-- ko compose: {view: 'nav'} -->
<!-- /ko-->
</header>
Basically the spinner just stays there on the top right and never disappears. I can navigate between my two pages and it just stays there, even though "compositionComplete" fires every time.
Entire shell.html file:
<div>
<header>
<!-- ko compose: {view: 'nav'} -->
<!-- /ko-->
</header>
<div>
<section id="content" class="main">
<!--ko router: { transition:'entrance', cacheViews:true }--><!--/ko-->
</section>
</div>
</div>
Edited shell.html file:
<div>
<header>
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="/">
<span class="title">My test SPA</span>
</a>
</div>
<div>
<ul class="nav navbar-nav" data-bind="foreach: router.navigationModel">
<li data-bind="css: { active: isActive }">
<a data-bind="attr: { href: hash }, html: title"></a>
</li>
</ul>
<p class="navbar-text pull-right">Logged in as Bilbo Baggins</p>
<div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
<i class="icon-spinner icon-2x icon-spin"></i>
</div>
</div>
</nav>
</header>
<div>
<section id="content" class="main">
<!--ko router: { transition:'entrance', cacheViews:true }--><!--/ko-->
</section>
</div>
</div>

Answer 1

This might be because the way you do the composition with the router in the shell.html.
In durandal 2.0 it should look like this:
<!--ko router: { transition:'entrance', cacheViews:true }--><!--/ko-->
Or if you want to keep it like the old way:
<!--ko compose: {model: router.activeItem,
attached: router.attached,
compositionComplete: router.compositionComplete,
transition: 'entrance'} -->
<!--/ko-->
Also take into consideration that the css class active might not work as expected in the divfor the loading gif. Instead you can use:
<div class="loader pull-right" data-bind="visible: router.isNavigating">
So you will hide the loader gif when it is not navigating.