title: Show loading indicator in Angular while waiting for a RxJS observable
body: <p>I have an Angular component that listens for a route parameter for a user id to change and when it does it loads the user details. The user details takes a few seconds to return data from the API.</p>
  
  <p>If i'm viewing details for User A and then click to view details on User B, it continues to show User A until User B details are returned a few seconds after my click. Is there a way I can show a loading indicator or just blank it out while it's retrieving data for User B?</p>
  
  <p>User details component:</p>
  
  <pre><code>ngOnInit(): void {
    this.userDetails = this.route.paramMap.pipe(
      switchMap((params: ParamMap) =&gt; this.userService.getUserDetails(+params.get('userId')))
    );
  }
  </code></pre>
  
  <p>User details template:</p>
  
  <pre><code>&lt;div *ngIf="userDetails | async as userDetails"&gt;
    &lt;h1&gt;{{userDetails.firstName}} {{userDetails.lastName}}&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like the user details div to either be blank or show some sort of loading indicator if that inner switchMap is currently running. I know one option would be to have a loading variable that I set to true before the switchMap and false after the switchMap and use that in the *ngIf of the div, but I'm hoping there was a slicker way to not have to have loading variables for EVERY one of these situations.</p>
  
  <p>I have an example StackBlitz:
  <a href="https://stackblitz.com/edit/angular-ng-busy-yxo1gu" rel="noreferrer">https://stackblitz.com/edit/angular-ng-busy-yxo1gu</a></p>
  
  <p>The goal is when I click the User B button, User A information should disappear while User B is loading. I have dozens of this scenario in my app so I'm looking for the cleanest way to do this.</p>