Как сделать loader с задержкой, чтобы не мигал? — 9 апреля 2026 г. в 07:11:58.909
Как сделать loader с задержкой, чтобы не мигал? Иногда при загрузке данных хочется показать спиннер, но только если это занимает больше, скажем, 300мс. Это позволяет избежать "мигающего" лоадера при быстрой загрузке. Я часто использую этот приём, особенно при загрузке модалок или переключении вкладок. Вот простая реализация на React: import { useState, useEffect } from "react"; function useDelayedLoader(isLoading: boolean, delay = 300) { const [showLoader, setShowLoader] = useState(false); useEffect(() => { let timeout: ReturnType<typeof setTimeout>; 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 && <Spinner />} {!isLoading && <Content />} </> ); ⚡️ Профит — спиннер появляется только если загрузка реально долгая. Пользователь не чувствует "дёргания" интерфейса. Маленький UX-трюк, но эффект — огромный. ✍️ @React_lib