Як реалізувати індикатор завантаження (Loader)?
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} />
);
}Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.