11. 11
    Extend Your Reactive Logic in RxJS using Observable-like Proxies that Delay or Drop Events
    3m 23s

Extend Your Reactive Logic in RxJS using Observable-like Proxies that Delay or Drop Events

InstructorRares Matei

Share this video with your friends

Send Tweet

Our app is working! But now our manager comes in and tells us that some tasks in our app are finishing very fast, so users are seeing a short glimpse of the spooner which makes the app look glitchy. Our new requirement is to wait at least 2 seconds before showing the spinner. So without introducing any complexity into our main observable, we will create a new intermediary stream that will be a proxy between the observable that immediately tells us when to show the spinner and the one that actual shows it. This new proxy will delay the events accordingly.

Colin Principe
Colin Principe
~ 5 years ago

In order to get this to work in my environment I had to change the import from rxjs/operators to rxjs and put spinnerDeactivated and flashThreshold into an array:

https://jsfiddle.net/Lcxgntwb/

Environment: OSX, Webstorm 2020.1.1, Firefox 75 64-bit.

Colin Principe
Colin Principe
~ 5 years ago

Sorry, by "this" I mean the spinner show time on the Almost Quick Task.

Rares Matei
Rares Matei(instructor)
~ 5 years ago

Hi Colin! I think you your comment is for the next lesson - 12.

And you are correct, we need to import "combineLatest" from the top-level "rxjs" package. If you look in the GitHub, that's how we did it: https://github.com/rarmatei/egghead-thinking-reactively/blob/lesson10/src/lesson-code/TaskProgressService.js

And combineLatest accepts a variable number of observables as input (not an array), so I'm surprised it's not working for you:

  • what version of rxjs are you using?
  • can you clone my repository, run npm install and let me know if it's still not working for you?