settimeout to show progressbar for 500ms

user_5629664 0
Viewed 52

props.loadingStatus.state ( value coming from server) (value can be Not Started, Running, Completed) depending on the value of loadingstatus i.e. if running then show progressbar + if state == completed quicker than 500ms then make progressbar visible for 500ms.

current result: I am able to see the loadingbar but then even after 500ms its visible. I am not sure where my logic going wrong.

const App =() => {
    const [LoadStat, setLoadStat] = React.useState(props.loadingStatus.state);
    React.useEffect(() => {
        setTimeout(() => {
          if (LoadStat === Running) {
            setLoadStat(props.loadingStatus.state);
          }
        }, 500);
    }, []);

    return (
    <>
        {LoadStat && (
          <ProgressBar
           minValue={0}
           maxValue={100}
           progress={percentage}
           />
        )}
    </>
    );
  }
}
reactjs settimeout javascript
1 Answers
React.useEffect(() => {
    if (LoadStat === Running) {
        setLoadStat(props.loadingStatus.state);
    }
    else{   
        setTimeout(() => {
            // hide the progressBar
        }, 500);
    }
}, []);

I don't know if this answers your question but here is what i got from your request. With this the progressBar will be updated on every loadStatus change but will disapear 500ms after terminated.

user_124259580
Related