Как вызвать действие, если ответ API больше X секунд?

Question

[Андрей Чирков]

Представим, что есть интернет-магазин.
Мне нужно, чтобы при переходе в категорию товаров и их загрузке было 2 варианта событий.

1 - ответ от API меньше 1 секунды -> лоадер не показывается.
2 - ответ от API больше 1 секунды -> показывается лоадер.

То есть я хочу показывать условный лоадер, если ответ промиса долгий,
если быстрый не показывать иконку загрузки вовсе.

Зачем? Хочу исключить дергание (появление и исчезание) лоадера при быстром интернете (99% случаев)
и задать особые условия при медленном интернете.

Это возможно вообще? Гуглеж не дал результата.
Или кто думал об этом буду рад услышать варианты решения подобной проблемы.

Comments

[Сергей Сергей]

В момент запуска запроса запускаем и секундный таймер с процедурой отображения иконки, а в обработчике ответа на запрос делаем отмену таймера и скрытие иконки.

[YavaDev]

Можно попробовать реализовать с помощью css.
Изначально делаете лоадер прозрачным.
Далее пишите css анимацию, которая будет делать лоадер видимым.
Ну и в самом конце используете данную анимацию с задержкой в 1 секунду.

Answer 1

[Денис Инешин]

Вам нужно параллельно запустить таймер и ваш запрос.
Если запрос завершится раньше - очистите таймер и лоадер не покажется.

let timerId = setTimeout(() => {
  // show loader
}, 1000);

fetch('API url').then((data) => {
  // prevent loader show
  clearTimeout(timerId);

  // show result
});

Comments

[Андрей Чирков]

Странно что не нашел сразу такого ответа, круто