Extend Your Reactive Logic in RxJS using Observable-like Proxies that Delay or Drop Events
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.
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.
Sorry, by "this" I mean the spinner show time on the Almost Quick Task.
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 installand let me know if it's still not working for you?