title: Durandal: At what stage in lifecycle should router.isNavigating deactivate?
body: <p><em>sigh</em> It's becoming the "daily question" routine with me, sorry!</p>
  
  <p>I have a nav.html that contains:</p>
  
  <pre><code>    &lt;div class="loader pull-right" data-bind="css: { active: router.isNavigating }"&gt;
          &lt;i class="icon-spinner icon-2x icon-spin"&gt;&lt;/i&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Trouble is, it never deactivates!  The spinner always stays rotating, basically.</p>
  
  <p>I've put in debugs in the viewmodels like in the Durandal html samples page:</p>
  
  <pre><code>    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
      };
  </code></pre>
  
  <p>and in my Chrome dev console I have:</p>
  
  <pre><code>Lifecycle : bindingComplete : home system.js:73
  Lifecycle : attached : home system.js:73
  Lifecycle : compositionComplete : home system.js:73
  </code></pre>
  
  <p>...and I would have thought that "compositionComplete" would have triggered the end of "router.isNavigating", no?</p>
  
  <p>The nav.html is composed in my shell.html file as so:</p>
  
  <pre><code>&lt;header&gt;
      &lt;!-- ko compose: {view: 'nav'} --&gt;
      &lt;!-- /ko--&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Entire shell.html file:</p>
  
  <pre><code>&lt;div&gt;
      &lt;header&gt;
          &lt;!-- ko compose: {view: 'nav'} --&gt;
          &lt;!-- /ko--&gt;
      &lt;/header&gt;
        &lt;div&gt;
          &lt;section id="content" class="main"&gt;
              &lt;!--ko router: { transition:'entrance', cacheViews:true }--&gt;&lt;!--/ko--&gt;
          &lt;/section&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Edited shell.html file:</p>
  
  <pre><code>&lt;div&gt;
      &lt;header&gt;
          &lt;nav class="navbar navbar-default"&gt;
            &lt;div class="navbar-header"&gt;
                  &lt;a class="navbar-brand" href="/"&gt;
                      &lt;span class="title"&gt;My test SPA&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;ul class="nav navbar-nav" data-bind="foreach: router.navigationModel"&gt;
                      &lt;li data-bind="css: { active: isActive }"&gt;
                          &lt;a data-bind="attr: { href: hash }, html: title"&gt;&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;p class="navbar-text pull-right"&gt;Logged in as &lt;a href="#" class="navbar-link"&gt;Bilbo Baggins&lt;/a&gt;&lt;/p&gt;
                  &lt;div class="loader pull-right" data-bind="css: { active: router.isNavigating }"&gt;
                      &lt;i class="icon-spinner icon-2x icon-spin"&gt;&lt;/i&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
        &lt;div&gt;
          &lt;section id="content" class="main"&gt;
              &lt;!--ko router: { transition:'entrance', cacheViews:true }--&gt;&lt;!--/ko--&gt;
          &lt;/section&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>