Suggest an editImprove this articleRefine the answer for “How to implement a loading indicator (Loader)?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)A **loading indicator (Loader)** is implemented via a `loading` flag in the component's state: while the request is in flight, `<Loader />` is rendered, and once it finishes, either the data or an error is shown. **Key point:** for accessibility, the Loader should carry `role="status"` and `aria-live="polite"` so screen readers announce the state change.Shown above the full answer for quick recall.Answer (EN)Image## 1. A basic spinner driven by a `loading` flag ```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="Loading users…" />; if (err) return <p role="alert">Error: {err.message}</p>; return <ul>{data!.map(u => <li key={u.id}>{u.name}</li>)}</ul>; } function Loader({ ariaLabel = "Loading…" }: { ariaLabel?: string }) { return ( <div className="loader" role="status" aria-live="polite" aria-label={ariaLabel} /> ); } ```For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.