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}
/>
)}
</>
);
}
}
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.