I'm still - grudgingly - making use of Observables in Ionic 2. As I've said before, I don't see anything wrong with Observables, I just find them overly complex and a pain to use. Half the time I get them working right it's because I've copied and pasted another example. I would say - easily - that out of all the changes with Ionic and Angular 2 (sorry, 4, um, whatever) it's Observables that I've had the hardest time adopting.

But while I'm griping about them, I do know they are hella powerful. Here is a great example. I was testing an Ionic demo that showed off the Loading widget. While it worked great, the API I was hitting returned so fast I didn't feel like I could get a good grip on how it would work in the real world.

Chrome has a very cool widget in DevTools that can slow your network requests down:

Network Throttle

It's a cool little addition to the dev tool suite, but there's one problem with this approach. When enabled for an Ionic app running via the serve command, everything will be delayed, even the 'local' files that would load instantly on a device. (Minus the time it takes for the web view to process the code of course.) Because of that, it isn't necessarily a realistic test. Also, it can get quite annoying if you are reloading a lot while working on the app.

So - on a whim - I did some searching, and discovered that Observables support a delay operation. It just delays the output from the observable. Yeah, that's it. Certainly not rocket science or anything, but it's also super easy to use. Consider this provider:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';

@Injectable()
export class Data {

 public cats:Array<Object> = [
   {name:'Luna', lastRating:new Date(2016, 11, 2 ,9, 30)},
   {name:'Pig', lastRating:new Date(2016, 11, 12, 16,57)},
   {name:'Cracker', lastRating:new Date(2016, 10, 29, 13, 1)},
   {name:'Robin', lastRating:new Date(2016, 11, 19, 5, 42)},
   {name:'Simba', lastRating:new Date(2016, 11, 18, 18, 18)}
   ];

  constructor() {
  }

  load() {
    return Observable.from(this.cats).delay(2000);
  }

}

I've got a static list of data I'm converting into an Observable and then delaying by two seconds. So now when I run my app in the browser, the main app loads, my loading widget shows up, and then 2ish seconds later my data shows up.

In general, I try to avoid testing that involves modifying my code as it is exactly the kind of thing you forget and leave in place, but it worked so well for testing the loading widget I figured I'd make an exception in this case.

Here is a super-advanced animated GIF showing this in action:

omg animated gif