ryzhovas
@ryzhovas

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

Подскажите, пожалуйста, как правильно сделать задержку показа лоадера с помощью 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
  // ... что дальше?
}
  • Вопрос задан
  • 282 просмотра
Решения вопроса 1
Xuxicheta
@Xuxicheta Куратор тега Angular
инженер
https://stackblitz.com/edit/angular-ws6pee
задержки увеличены до 1000 и 2500 для наглядности
В случае множественных загрузок возможны коллизии, надо будет дорабатывать.
Лоадер, дебаунсер и таймауты можно и нужно изолировать в отдельном компоненте (или директиве), который будет получать текущее значение лоадера (тут оно setLoader) как инпут параметр.
В принципе вообще можно сделать даже пайп.


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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы