Search code examples
rxjsrxjs6rxjs-pipeable-operators

How can I delay an observable only if it returns faster than the delay


Take for example:

 this.http.get('/getdata').pipe(delay(2000))

I would like this request to take a minimum of 2s to complete, but not any longer than it takes for the request to complete.

In other words:

  1. if the request takes 1s to complete, I want the observable to complete in 2s.

  2. if the request takes 3s to complete, I want the observable to complete in 3s NOT 5s.

Is there some other pipe other than delay() that can achieve this that I don't know about or is there a way to build a custom pipe for this if necessary?

The use case is to show a loader, however if the request completes too fast it doesnt look good when the loader just "flashes" for a split second


Solution

  • To answer the question as asked, you could simply use combineLatest() to combine a timer(2000) observable and the request observable, then just ignore the result from the timer observable. It works because combineLatest waits until all observables have emitted at least one value before emitting one itself.

    combineLatest(this.http.get('/getdata'), timer(2000), x => x)