Quiero mostrar la barra de progreso durante 500 ms incluso si está cargada al 100 %. Escenario actual: a veces los datos llegan tan rápido que la barra de progreso aparece y desaparece muy rápido. El usuario a veces no lo ve, incluso si se mostró.
intenté usar setTimeout(() => ,500) // pero no funcionó.
Cualquier sugerencia lógica apreciada.
class ABC extends React.Component { render() { return ( <> {state === Running && ( <ProgressBar minValue={0} maxValue={100} progress={percentage} /> )} </> ); } } class ProgressBar extends React.Component { render() { let percentage = (this.props.progress - this.props.minValue) / (this.props.maxValue - this.props.minValue); percentage = Math.max(Math.min(percentage , 1), 0); const fillstyle = { width: (percentage * 100) + "%" }; return ( <div className="progressbar" style={this.props.style}> <div className="progressbar--fill" style={fillstyle}></div> </div>); }La mejor manera de demostrar eso sería un componente funcional React con useEffect que inicia un temporizador
Como esto:
const ABC = () => { const [isTimerRunning, setIsTimerRunning] = React.useState(true); React.useEffect(() => { let canceled = false; setTimeout(() => { if (!canceled) { setIsTimerRunning(false) } }, 500); return () => canceled = true; }, []); return (isTimerRunning || Running) ? ( <ProgressBar minValue={0} maxValue={100} progress={50} /> ) : null; }La cancelación del tiempo de espera es una buena práctica de React. su componente puede desmontarse antes de que se ejecute el temporizador, y una vez que se ejecuta, intentará establecer el estado en un componente desmontado, lo que provocará un error al reaccionar. es por eso que es mejor asegurarse de devolver una función (reaccionará al desmontarla) que cancela la ejecución "futura".