title: Using Observables, show loading indicator after delay but cancel if loading is completed in time?
body: <p>In my customer-detail component I have the following code that achieves what I'm after but not in the reactive/observable way I think might be possible.</p>
  
  <p>Instead of wrapping <code>this.isLoading = true;</code> in an if statement, is there a way to do this using reactive programming techniques? Perhaps by cancelling/dropping the delayed observable if the customer is retrieved first? Or, am I going about this the wrong way?</p>
  
  <pre><code>export class CustomerDetailComponent implements OnInit {
  
    customer: Customer;
    errorMessage: string;
    isLoading: boolean;
  
    constructor(
      private customerService: CustomerService,
      private route: ActivatedRoute,
      private router: Router,
      private location: Location
    ) { }
  
    ngOnInit() { 
      let idParam = this.route.params
        .distinctUntilChanged(params =&gt; params['id']);
  
      idParam.subscribe(params =&gt; 
      {
        this.errorMessage = ''; 
      });
  
      idParam.delay(300).subscribe(params =&gt; 
      {
        if (!(this.customer &amp;&amp; this.customer.id == params['id']))
          this.isLoading = true;
      });
  
      idParam.switchMap((params: Params) =&gt; this.customerService.getCustomer(params['id']))
        .subscribe(customer =&gt; 
        { 
          this.customer = customer; 
          this.isLoading = false;
        },
        error =&gt; this.errorMessage = error);
    }
  }
  </code></pre>