Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як реалізувати індикатор завантаження (Loader)?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Індикатор завантаження (Loader)** реалізується через прапорець `loading` у стані компонента: поки запит виконується, рендериться `<Loader />`, а після завершення - дані або помилка. **Ключове:** для доступності Loader варто позначити атрибутами `role="status"` та `aria-live="polite"`, щоб зміну стану озвучували скрінрідери.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## 1. Базовий спінер за прапорцем `loading` ```javascript import { useEffect, useState } from "react"; export function Users() { const [data, setData] = useState<any[] | null>(null); const [loading, setLoading] = useState(true); const [err, setErr] = useState<Error | null>(null); useEffect(() => { (async () => { try { const res = await fetch("/api/users"); if (!res.ok) throw new Error(`HTTP ${res.status}`); setData(await res.json()); } catch (e: any) { setErr(e); } finally { setLoading(false); } })(); }, []); if (loading) return <Loader ariaLabel="Завантаження користувачів…" />; if (err) return <p role="alert">Помилка: {err.message}</p>; return <ul>{data!.map(u => <li key={u.id}>{u.name}</li>)}</ul>; } function Loader({ ariaLabel = "Завантаження…" }: { ariaLabel?: string }) { return ( <div className="loader" role="status" aria-live="polite" aria-label={ariaLabel} /> ); } ```Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.