Showing a loading message until the blob file is downloaded - reactjs

Question

I am printing a bill as a pdf document after submitting the billing form. The service that is downloading the blob file is as follows.
export default [createLogic({
type: reportTypes.REPORT,
latest: true,
debounce: 2000,
process({ MockHTTPClient, getState, action }, dispatch, done) {
dispatch(reportActions.queryStart())
let HTTPClient;
if (MockHTTPClient) {
HTTPClient = MockHTTPClient;
} else {
HTTPClient = API;
}
HTTPClient.Post(endPoints.REPORTS_BILL, action.payload.reportOptions)
.then(
(resp) => {
return resp.data
})
.then((data) => {
dispatch(reportActions.getReportSuccess(data));
var link = document.createElement('a');
link.href = `data:application/octet-stream;base64,${data}`;
var today = new Date();
var date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds() + ":" + today.getMilliseconds();
var dateTime = date + ' ' + time;
var fileName = dateTime + "billing.pdf";
link.download = fileName;
link.click();
var base64str = data;
var binary = atob(base64str.replace(/\s/g, ''));
var len = binary.length;
var buffer = new ArrayBuffer(len);
var view = new Uint8Array(buffer);
for (var i = 0; i < len; i++) {
view[i] = binary.charCodeAt(i);
}
var blob = new Blob([view], { type: "application/pdf" });
var url = URL.createObjectURL(blob);
window.open(url);
dispatch(reportActions.getReportSuccess(data))
})
.then(() => dispatch(reportActions.queryEnd()))
.catch(err => {
dispatch(reportActions.getReportFailed());
var errorMessage = "Failed to get prductivity data.";
if (err && err.code == "ECONNABORTED") {
errorMessage = "Please check your internet connection.";
}
dispatch(
reportActions.getReportFailed({
title: "Error!",
message: errorMessage
})
);
})
.then(() => done());
}
})
]
In the Billing Component following is the method that I am calling the service.
printBill = () => {
debugger;
var reportType = 1;
var reportFiltersSet = {};
if (this.billingOptions.length > 0) {
this.billingOptions.map(v => {
reportFiltersSet[v.name] = v.value;
});
}
this.props.reportActions.queryStart();
var reportType = 1; //Thiis need to be dynamic. use this => //this.state.reportType
var reportFilters = this.state.billingOptions;
if (
reportFiltersSet.organization == undefined ||
reportFiltersSet.department == undefined ||
reportFiltersSet.division == undefined ||
reportFiltersSet.billYear == undefined ||
reportFiltersSet.billMonth == undefined
) {
this.setState({
reportContentNull: true,
warning: "Error!",
errorMessage:
"Either department or division reqiured with organization , year and month",
negative: true,
hidden: false
});
this.props.reportActions.getReport({ reportOptions: reportFiltersSet });
var reportDownloadType = this.state.reportType;
};
I can download the blob file , when I submit the form without any problem. But in user's perspective it is important to show that the loading state in order to have a better user experince. Therefore can anyone help me out to show a loading message during the submit and loading the blob file?

Answer 1

So the Idea is to start loading as soon as HTTP calls happens and remove it when response is recieved.
Simple way would be add a loading variable in state and in render check that variable and show spinner.
onClick = () => {
this.setState({ loading: true }, () => {
Axios.get('/sampelCall')
.then(result => this.setState({
loading: false,
data: [...result.data],
}));
});
}
render() {
const { data, loading } = this.state;
return (
<div>
<button onClick={this.onClick}>
Load Data
</button>
{loading ? <LoadingSpinner /> : <ResultsTable results={data} />} // if loading in true will show Spinner
</div>
);
}
Note:
You need to handle loading variable in all cases (Success/Error) else Spinner will keep on loading.