I thought of using RxJS to solve elegantly this problem, but after trying various approaches, I couldn't find out how to do it...

My need is quite mon: I do a Rest call, ie. I have a Promise. If the response es quickly, I just want to use the result. If it is slow to e, I want to display a spinner, until the request pletes. This is to avoid a flash of a the spinner, then the data.

Maybe it can be done by making two observables: one with the promise, the other with a timeout and showing the spinner as side effect. I tried switch() without much success, perhaps because the other observable doesn't produce a value.

Has somebody implemented something like that?

I thought of using RxJS to solve elegantly this problem, but after trying various approaches, I couldn't find out how to do it...

My need is quite mon: I do a Rest call, ie. I have a Promise. If the response es quickly, I just want to use the result. If it is slow to e, I want to display a spinner, until the request pletes. This is to avoid a flash of a the spinner, then the data.

Maybe it can be done by making two observables: one with the promise, the other with a timeout and showing the spinner as side effect. I tried switch() without much success, perhaps because the other observable doesn't produce a value.

Has somebody implemented something like that?

• javascript
• promise
• spinner
• rxjs

• Two promises should work, yes. Can you show us the code you tried? – Bergi Commented Feb 18, 2016 at 17:37
• Thanks for asking, @Bergi. I finally posted a solution, with a link to the Plunker I made for this experiment (previous tries were too messy...). Of course, other solutions are wele – PhiLho Commented Feb 18, 2016 at 20:19
• Most coders don't worry about spinner-flash. Delaying the spinner can never eliminate the possibility of a short flash, only shift it downstream in time. And the more it is delayed, the longer your users will be left without an indication of background activity, which is a spinner's purpose. Also, remember that the ultra-short latencies you experience in (local) development will typically increase in the live environment (busier server, internet delays ...) – Roamer-1888 Commented Feb 19, 2016 at 12:30

5 Answers 5

Based on @PhiLho's answer, I wrote a pipeable operator, which does exactly that:

export function executeDelayed<T>(
    fn : () => void,
    delay : number,
    thisArg? : any
) : OperatorFunction<T, T> {
    return function executeDelayedOperation(source : Observable<T>) : Observable<T> {
        let timerSub = timer(delay).subscribe(() => fn());
        return source.pipe(
            tap(
                () => {
                    timerSub.unsubscribe();
                    timerSub = timer(delay).subscribe(() => fn());
                },
                undefined,
                () => {
                    timerSub.unsubscribe();
                }
            )
        );
    }
}

Basically it returns a function, which gets the Observable source.
Then it starts a timer, using the given delay.
If this timer emits a next-event, the function is called.
However, if the source emits a next, the timer is cancelled and a new one is startet.
In the plete of the source, the timer is finally cancelled. This operator can then be used like this:

this.loadResults().pipe(
    executeDelayed(
        () => this.startLoading(),
        500
    )
).subscribe(results => this.showResult())

I did not wirte many operators myself, so this operator-implementation might not be the best, but it works.
Any suggestions on how to optimize it are wele :)

EDIT: As @DauleDK mentioned, a error won't stop the timer in this case and the fn will be called after delay. If thats not what you want, you need to add an onError-callback in the tap, which calls timerSub.unsubscribe():

export function executeDelayed<T>(
    fn : () => void,
    delay : number,
    thisArg? : any
) : OperatorFunction<T, T> {
    return function executeDelayedOperation(source : Observable<T>) : Observable<T> {
        let timerSub = timer(delay).subscribe(() => fn());
        return source.pipe(
            tap(
                () => {
                    timerSub.unsubscribe();
                    timerSub = timer(delay).subscribe(() => fn());
                },
                () => timerSub.unsubscribe(),   // unsubscribe on error
                () => timerSub.unsubscribe()
            )
        );
    }
}

Here is an example that I have used. We assume here that you get the data that you want to send to the server as an Observable as well, called query$. A query ing in will then trigger the loadResults function, which should return a promise and puts the result in the results$ observable.

Now the trick is to use observable$.map(() => new Date()) to get the timestamp of the last emitted value.

Then we can pare the timestamps of the last query and the last response that came in from the server.

Since you also wanted to not only show a loading animation, but wanted to wait for 750ms before showing the animation, we introduce the delayed timestamp. See the ments below for a bit more explanation.

At the end we have the isLoading$ Observable that contains true or false. Subscribe to it, to get notified when to show/hide the loading animation.

const query$ = ... // From user input.

const WAIT_BEFORE_SHOW_LOADING = 750;

const results$ = query$.flatMapLatest(loadResults);

const queryTimestamp$ = query$.map(() => new Date());
const resultsTimestamp$ = results$.map(() => new Date());
const queryDelayTimestamp$ = (
    // For every query ing in, we wait 750ms, then create a timestamp.
    query$
    .delay(WAIT_BEFORE_SHOW_LOADING)
    .map(() => new Date())
);

const isLoading$ = (
    queryTimestamp$.bineLatest(
        resultsTimestamp$,
        queryDelayTimestamp$,
        (queryTimestamp, resultsTimestamp, delayTimestamp) => {
            return (
                // If the latest query is more recent than the latest
                // results we got we can assume that
                // it's still loading.
                queryTimestamp > resultsTimestamp &&
                // But only show the isLoading animation when delay has passed
                // as well.
                delayTimestamp > resultsTimestamp
            );
        }
    )
    .startWith(false)
    .distinctUntilChanged()
);

OK, thinking more about it in my muting, I found a solution...

You can find my experiment ground at http://plnkr.co/edit/Z3nQ8q

In short, the solution is to actually subscribe to the observable handing the spinner (instead of trying to pose it in some way). If the result of the Rest request es before the observable fires, we just cancel the spinner's disposable (subscription), so it does nothing. Otherwise, the observable fires and display its spinner. We can then just hide it after receiving the response.

Code:

function test(loadTime)
{
  var prom = promiseInTime(loadTime, { id: 'First'}); // Return data after a while
  var restO = Rx.Observable.fromPromise(prom);

  var load = Rx.Observable.timer(750);
  var loadD = load.subscribe(
    undefined,
    undefined,
    function onComplete() { show('Showing a loading spinner'); });

  restO.subscribe(
    function onNext(v) { show('Next - ' + JSON.stringify(v)); },
    function onError(e) { show('Error - ' + JSON.stringify(e)); loadD.dispose(); },
    function onComplete() { show('Done'); loadD.dispose(); }
  );
}

test(500);
test(1500);

Not sure if that's an idiomatic way of doing this with RxJS, but it seems to work... Other solutions are wele, of course.

Here is my solution :

public static addDelayedFunction<T>(delayedFunction: Function, delay_ms: number): (mainObs: Observable<T>) => Observable<T> {
    const stopTimer$: Subject<void> = new Subject<void>();
    const stopTimer = (): void => {
        stopTimer$.next();
        stopTimer$.plete();
    };
    const catchErrorAndStopTimer = (obs: Observable<T>): Observable<T> => {
        return obs.pipe(catchError(err => {
            stopTimer();
            throw err;
        }));
    };
    const timerObs: Observable<any> = of({})
        .pipe(delay(delay_ms))
        .pipe(takeUntil(stopTimer$))
        .pipe(tap(() => delayedFunction()));
    return (mainObs: Observable<T>) => catchErrorAndStopTimer(
        of({})
            .pipe(tap(() => timerObs.subscribe()))
            .pipe(mergeMap(() => catchErrorAndStopTimer(mainObs.pipe(tap(stopTimer)))))
    );
}

Just before fetching the data, ie. creating the spinner, set timeout for a function, which creates the spinner. Lets say you are willing to wait half a second, until showing spinner... it would be something like:

spinnerTimeout = setTimeout(showSpinner, 500)
fetch(url).then(data => {
  if (spinner) {
    clearTimeout(spinnerTimeout) //this is critical
    removeSpinnerElement()
  }
  doSomethingWith(data)
});

EDIT: if it's not obvious, clearTimer stops the showSpinner from executing, if the data arrived sooner than 500ms(ish).