title: RxJs flatMapLatest/switchMap cancel callback. Where is onCancel()?
body: <p>I've got 2 nested Observable Streams which do HTTP requests. Now I'd like to display a loading indicator, but can't get it working correctly.</p>
  
  <pre><code>var pageStream = Rx.createObservableFunction(_self, 'nextPage')
          .startWith(1)
          .do(function(pageNumber) {
              pendingRequests++;
          })
          .concatMap(function(pageNumber) {
              return MyHTTPService.getPage(pageNumber);
          })
          .do(function(response) {
              pendingRequests--;
          });
  
  Rx.createObservableFunction(_self, 'search')
          .flatMapLatest(function(e) {
              return pageStream;
          })
          .subscribe();
  
  
  
  search();
  nextPage(2);
  nextPage(3);
  search();
  </code></pre>
  
  <p>This will trigger <code>pendingRequests++</code> 4 times, but <code>pendingRequests--</code> only once, because <code>flatMapLatest</code> will cancel the inner observable before the first 3 HTTP responses arrive.</p>
  
  <p>I couldn't find anything like an <code>onCancel</code> callback. I also tried <code>onCompleted</code> and <code>onError</code>, but those too won't get triggered by <code>flatMapLatest</code>.</p>
  
  <p>Is there any other way to get this working?</p>
  
  <p>Thank you!</p>
  
  <h2>EDIT: Desired loading indicator behavior</h2>
  
  <ol>
  <li><p>Example: Single <code>search()</code> call.</p>
  
  <ul>
  <li>search() -> start loading indicator</li>
  <li>when search() response comes back -> disable loading indicator</li>
  </ul></li>
  <li><p>Example: <code>search()</code> and <code>nextPage()</code> call. <em>(nextPage() is called <strong>before</strong> search() response came back.)</em></p>
  
  <ul>
  <li>search() -> start loading indicator</li>
  <li>nextPage() -> indicator is already started, though nothing to do here</li>
  <li>stop loading indicator after <strong>both</strong> responses arrived</li>
  </ul></li>
  <li><p>Example: <code>search()</code>, <code>search()</code>. <em>(search() calls override each other, though the response of the first one can be dismissed)</em></p>
  
  <ul>
  <li>search() -> start loading indicator</li>
  <li>search() -> indicator is already started, though nothing to do here</li>
  <li>stop loading indicator when the response for the <strong>second</strong> search() arrived</li>
  </ul></li>
  <li><p>Example: <code>search()</code>, <code>nextPage()</code>, <code>search()</code>. <em>(Again: Because of the second search(), the responses from the previous search() and nextPage() can be ignored)</em></p>
  
  <ul>
  <li>search() -> start loading indicator</li>
  <li>nextPage() -> indicator is already started, though nothing to do here</li>
  <li>search() -> indicator is already started, though nothing to do here</li>
  <li>stop loading indicator when response for the <strong>second</strong> search() arrived</li>
  </ul></li>
  <li><p>Example: <code>search()</code>, <code>nextPage()</code>. But this time nextPage() is called after search() response came back.</p>
  
  <ul>
  <li>search() -> start loading indicator</li>
  <li>stop loading indicator because search() response arrived</li>
  <li>nextPage() -> start loading indicator</li>
  <li>stop loading indicator because nextPage() response arrived</li>
  </ul></li>
  </ol>
  
  <hr>
  
  <p>I tried using <code>pendingRequests</code> counter, because I can have multiple <strong>relevant</strong> requests at the same time (for example: <code>search(), nextPage(), nextPage()</code>). Then of course I'd like to disable the loading indicator <strong>after</strong> all those relevant requests finished.</p>
  
  <p>When calling <code>search(), search()</code>, the first search() is irrelevant. Same applies for <code>search(), nextPage(), search()</code>. In both cases there's only one active relevant request (the last <code>search()</code>).</p>