Как сделать loader с задержкой, чтобы не мигал?

Иногда при загрузке данных хочется показать спиннер, но только если это занимает больше, скажем, 300мс. Это позволяет избежать "мигающего" лоадера при быстрой загрузке. Я часто использую этот приём, особенно при загрузке модалок или переключении вкладок.

Вот простая реализация на React:


import { useState, useEffect } from "react";

function useDelayedLoader(isLoading: boolean, delay = 300) {
const [showLoader, setShowLoader] = useState(false);

useEffect(() => {
let timeout: ReturnType;

if (isLoading) {
timeout = setTimeout(() => setShowLoader(true), delay);
} else {
setShowLoader(false);
}

return () => clearTimeout(timeout);
}, [isLoading, delay]);

return showLoader;
}


Использование:


const isLoading = ...; // например, из useQuery или useState
const showLoader = useDelayedLoader(isLoading);

return (

{showLoader && }
{!isLoading && }

);


⚡️ Профит — спиннер появляется только если загрузка реально долгая. Пользователь не чувствует "дёргания" интерфейса. Маленький UX-трюк, но эффект — огромный.


📲 Мы в MAX

✍️ @React_lib