Как показывать спиннер только при длительной загрузке?

Question

[Ivan-P]

На всех страницах SPA стоит спиннер, но иногда данные приходят быстро и спиннер только раздражает. Как сделать чтобы его отображение было только про загрузке данных больше n-времени.

Answer 1

[Алексей Николаев]

Показывайте его через определенный промежуток времени. Например, через две секунды.

setTimeout(function() {
    initSpinner();
}, 2000);

Comments

[Антон Середний]

но если данные идут долго - то эти 2 секунды будет пустота

[Ivan-P]

Не совсем то, что хочется. Если загрузка происходит за 2.1 секунды а спиннер появится через 2, будет тот же блинк-эффект в 0.1сек, но с задержкой. А можно ли сделать чтобы на перед просчитать нужно ли показывать спиннер или нет?

Answer 2

[_ _]

Наперед посчитать не получится, если только вы не Ванга :D
Реализуйте простую логику - показываем спиннер через 300 мс., если за это время не пришел ответ.
Если ответ приходит позже, а спиннер уже отображается, то делаем принудительную задержку, чтобы спиннер отображался не менее N мс.

0мс - отправили запрос
300мс - ответа нет, включаем лоадер
350мс - пришел ответ, лоадер активен, минимальное время отображения лоадера 400мс, откладываем обработку полученных данных на 400 - (350-300) = 350мс
700мс - скрываем лоадер, обрабатываем данные (вываливаем в скоуп и.т.д)