Как с помощью RxJs показать лоадер для медленного запроса?

Question

[Artem Ryzhov]

Подскажите, пожалуйста, как правильно сделать задержку показа лоадера с помощью RxJs и Angular? Смысл в том, чтобы показывать лоадер, только если запросы медленные и избежать его показов на долю секунды.

- отправляем запрос
- если запрос длится более 500 мс, то показываем лоадер
- когда приходит ответ от сервера, скрываем лоадер, отдаем ответ
- если ответ от сервера приходит раньше, то сразу же отдаем ответ, лоадер не показываем
- если лоадер уже показан, то отображать его не менее 300 мс

Пример 1:
0ms: отправляем запрос
100ms: пришел ответ
100ms: отдали ответ

Пример 2:
0ms: отправляем запрос
500ms: показываем лоадер
1000ms: пришел ответ
1000ms: скрываем лоадер, отдаем ответ

Пример 3:
0ms: отправляем запрос
500ms: показываем лоадер, минимум 300 мс
550ms: пришел ответ
800ms: скрываем лоадер, отдаем ответ

async showUser(id: number) {
  this.showLoader = false;
  const data = from(this.usersService.findOne(id)); // Objervabe from Promise
  // ... что дальше?
}

Answer 1

[Антон Швец]

https://stackblitz.com/edit/angular-ws6pee
задержки увеличены до 1000 и 2500 для наглядности
В случае множественных загрузок возможны коллизии, надо будет дорабатывать.
Лоадер, дебаунсер и таймауты можно и нужно изолировать в отдельном компоненте (или директиве), который будет получать текущее значение лоадера (тут оно setLoader) как инпут параметр.
В принципе вообще можно сделать даже пайп.

- если запрос длится более 500 мс, то показываем лоадер
- если лоадер уже показан, то отображать его не менее 300 мс

Если бы эти два числа были одинаковы, можно было обойтись одним debounceTime на лоадере.

Comments

[Artem Ryzhov]

Спасибо большое за развернутый ответ и пример!

С задержками из примера получается такая последовательность:

Пример:
0ms: отправляем запрос
1000ms: показываем лоадер
1500ms: пришел ответ
4000ms: скрываем лоадер, отдаем ответ

В этом случае не выполняется одно из условий. Лоадер показывается 3000 мс, хотя минимальное время отображения указано 2500. То есть лоадер должен скрываться на 3500 мс, так как данные уже есть и минимальное время отображения истекло.

Другими словами: если ответ пришел раньше, то ожидаем пока не истечет 2500 мс и только тогда скрываем лоадер. Если ответ пришел позже, то скрываем лоадер сразу же, так как он уже показывается более чем 2500 мс.

[Антон Швец]

Artem Ryzhov,
Ну вот реализация не реактивная

ну то есть иными словами
1. Показываем лоадер через 500мс после начала, в том случае если реквест не завершен.

private loaderState = {
    timeout: null,
    completed: null,
  }

private startLoader() {
    setTimeout(() => this.onLoaderStarting(), 500);
    this.loaderState.timeout = setTimeout(() => this.onLoaderTimeout(), 3000);
  }

  private onLoaderStarting() {
    if (!this.loaderState.completed) {
      this.loaderSource$.next(true)
    }
  }

2. При завершении запроса смотрим истекли ли 3000мс после начала реквеста, если истекли прекращаем лоадер, если не истекли, то откладываем до истечения.
Иными словами проверяем два флага в двух моментах - при истечении времени и при завершении реквеста.

private onLoaderTimeout() {
    this.loaderState.timeout = null;
    this.emitLoaderFalse();
  }

  private onRequestComplete() {
    this.loaderState.completed = true;
    this.emitLoaderFalse();
  }

  private emitLoaderFalse() {
    if (this.loaderState.completed && !this.loaderState.timeout) {
      this.loaderSource$.next(false);
    }
  }

позже, если будет настроение перепишу на rxjs

[Artem Ryzhov]

Да, таки остановлюсь на реализации с таймаутами. Была мысль что с помощью RxJs получится элегантнее)
Еще раз спасибо за помощь!

[Антон Швец]

Artem Ryzhov, на самом деле скорее всего получится, delayWhen + forkJoin тут впишется, но пока не могу придумать, надо убегать :)

[Антон Швец]

Artem Ryzhov,

private createLoader(showTime: number, hideTime: number, request$: Observable<any>): Observable<boolean> {
  const timerToShow$ = timer(showTime).pipe(
    takeUntil(request$),
    mapTo(true)),
  ]);

    const timerToHide$ = race([
      request$,
      timer(hideTime),
    ])
      .pipe(
        mapTo(false)
     );
   
    return merge(timerToShow$, timerToHide$);
}

[Artem Ryzhov]

Антон Швец, в этом случае лоадер может показаться на короткий промежуток времени)
При значениях showTime = 500, hideTime = 1000 и длительности запроса 600 мс, лоадер покажется на 100 мс. Если race заменить на merge + takeUntil(2), тогда этот случай работает как надо. Но не отрабатывает случай, когда запрос длится менее showTime. При срабатывании request$ раньше showTime нужно как-то отменять все остальное.

private createLoader(showTime: number, hideTime: number, request$: Observable<any>): Observable<boolean> {

        const timerToShow$ = timer(showTime)
            .pipe(
                takeUntil(request$),
                mapTo(true)
            );

        const timerToHide$ = merge(
                request$,
                timer(showTime + hideTime),
            )
            .takeLast(2)
            .pipe(
                mapTo(false)
            );

        return merge(timerToShow$, timerToHide$);
    }

Еще раз пройдусь по условиям:
- showTime - минимальное время до показа лоадера
- hideTime - минимальная длительность показа лоадера
- если длительность запроса меньше showTime, лоадер не показываем
- если длительность запроса больше showTime и меньше showTime + hideTime, то лоадер должен быть виден на протяжении всего hideTime
- если длительность запроса больше showTime + hideTime, то лоадер должен скрыться по окончании запроса
Конечная цель - не показывать лоадер для быстрых запросов, показывать на протяжении hideTime для средних запросов, показывать пока не придет ответ для медленных запросов. Все ради того, чтобы не было "резких" появлений лоадера.

[Антон Швец]

Artem Ryzhov,

const timerToHide$ = forkJoin([
  request$,
  timer(showTime + hideTime),
])
  .pipe(
    mapTo(false)
  );

даст вам срабататывания false когда завершились оба условия.

takeLast(2) - пропустит два значения перед завершением, но их там всегда два, это ничего не даст.
takeLast(1) тогда уж, это отфильтрует первый. или тоже самое skip(1)

При срабатывании request$ раньше showTime нужно как-то отменять все остальное.

true отменяется, а false не мешает.

[Artem Ryzhov]

Итоговое решение вот такое, вроде бы работает как ожидается. Лишнее срабатывание false убрал с помощью skipUntil.

private createLoader(showTime: number, hideTime: number, request$: Observable<any>): Observable<boolean> 
    {

        const timerToShow$ = timer(showTime)
            .takeUntil(request$)
            .mapTo(true);

        const timerToHide$ = forkJoin(
                request$,
                timer(showTime + hideTime),
            )
            .skipUntil(timerToShow$)
            .mapTo(false);

        return merge(timerToShow$, timerToHide$);
    }

[Антон Швец]

Artem Ryzhov, timerToHide$не может сработать раньше, чем timerToShow$ по причине timer(showTime) всегда раньше чем timer(showTime + hideTime)

[Artem Ryzhov]

Антон Швец, да, но срабатывало позже, даже в случае, если запрос уже завершился (timerToShow$ не успел отработать)

[Антон Швец]

Artem Ryzhov, кстати этот вопрос всплыл еще раз, пришлось придумать более интересное решение. https://rxviz.com/v/7JX1aeg8