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

sigh it's becoming "daily question" routine me, sorry!

i have nav.html contains:

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

trouble is, never deactivates! spinner stays rotating, basically.

i've put in debugs in viewmodels in 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 module, allowing triggering of 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 chrome dev console have:

lifecycle : bindingcomplete : home system.js:73 lifecycle : attached : home system.js:73 lifecycle : compositioncomplete : home system.js:73 

...and have thought "compositioncomplete" have triggered end of "router.isnavigating", no?

the nav.html composed in shell.html file so:

<header>     <!-- ko compose: {view: 'nav'} -->     <!-- /ko--> </header> 

basically spinner stays there on top right , never disappears. can navigate between 2 pages , stays there, 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 <a href="#" class="navbar-link">bilbo baggins</a></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> 

this might because way composition router in shell.html.

in durandal 2.0 should this:

<!--ko router: { transition:'entrance', cacheviews:true }--><!--/ko--> 

or if want keep old way:

<!--ko compose: {model: router.activeitem,          attached: router.attached,               compositioncomplete: router.compositioncomplete,              transition: 'entrance'} -->     <!--/ko--> 

also take consideration css class active might not work expected in divfor loading gif. instead can use:

<div class="loader pull-right" data-bind="visible: router.isnavigating"> 

so hide loader gif when not navigating.