How to display the React Axios progress bar? - reactjs

Question

I want the result screen
My componentDidMount ()
_isMounted = false;
componentDidMount() {
this._isMounted = true;
var page = 0; // 공정 라인 수
//비가동 현황 불러오기
let oprationStatus = () => {
axios.get('http://localhost:8080/api/process/FM')
.then(response => {
var output = response && response.data;
//비가동 현황
NonOperationalStatus.data.series[0][0] = output.list[page].nop_000; // 계획
NonOperationalStatus.data.series[0][1] = output.list[page].nop_001; // 재료
NonOperationalStatus.data.series[0][2] = output.list[page].nop_002; // 금형
NonOperationalStatus.data.series[0][3] = output.list[page].nop_003; // 설비
NonOperationalStatus.data.series[0][4] = output.list[page].nop_004; // 사람
NonOperationalStatus.data.series[0][5] = output.list[page].nop_etc; // 기타
});
}
//가동율 등등 기본 정보 가져오기
let getProcess = () => {
oprationStatus();
axios.get('http://localhost:8080/api/process/FM')
.then(response => {
var output = response && response.data;
if(this._isMounted) {
this.setState({
data: output.list[page]
})
if(page < output.list.length-1) {
page++;
} else if(page == output.list.length-1) {
page = 0;
this.props.history.push('/hdprocess')
}
setTimeout(getProcess, 1000 * 5); // 매 5초마다 값 가져옴
}
});
}
getProcess();
}
componentWillUnmount() {
this._isMounted = false;
}
This code gets the data from the API server at 5 second intervals and routes it to the next page.
What I want is to display a progress icon as the picture above while the asynchronous communication is loading.
Let me know if you have a good alternative

Answer 1

Initially use a progress or spinner component.
Use it until a valid Response is return from the Axios Function, if a valid Response is attained, change the spinner(progres bar) Component to the actual component