Milton Gonzalez
21 lines
791 B
React
21 lines
791 B
React
import { useEffect, useState } from 'react';
|
|
|
|
// Indicador de proceso largo (ej. consultas a la IA): spinner, mensaje y segundos transcurridos,
|
|
// para que el usuario sepa que el sistema esta trabajando y no colgado.
|
|
export function BusyPanel({ message, hint }) {
|
|
const [seconds, setSeconds] = useState(0);
|
|
useEffect(() => {
|
|
const id = setInterval(() => setSeconds((s) => s + 1), 1000);
|
|
return () => clearInterval(id);
|
|
}, []);
|
|
return (
|
|
<div className="busy-panel" role="status" aria-live="polite">
|
|
<div className="busy-spinner" aria-hidden="true" />
|
|
<div>
|
|
<div className="busy-message">{message} <span className="text-muted">({seconds}s)</span></div>
|
|
{hint && <div className="text-muted busy-hint">{hint}</div>}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|