I am performing few activities like upload,download,delete,edit...and for each activity I am displaying status like 'upload started', 'upload completed' etc...This absolutely works fine if I am on the same page. but sometimes user may click on download button and he may navigate to different page. In such case, I see that download api's get called and it completes successfully but status does not update, it keeps spinning at 'download in progress'.Here is my logic, If such things can be handled differently?
download(){
let object = {
message: '',
subactivity: []
};
this.elements.foreach(e => {
object.message = 'download in progress';
object.subactivity.unshift({
id: e.id,
status: 'preparing',
message: 'download inprogress',
})
this.activity.unshift(object);
await downloadElements(element);
});
async downloadElements(element){
...
let result = await this.service.download(this.role,element).pipe(first()).toPromise();
if (result) {
var arr2 = [{
id: element.id,
status: 'success',
message: 'download complete'
}];
var res = this.activity[0].subactivity.findIndex(obj => {
return obj.id === arr2[0].id;
});
this.activity[0].subactivity[res] = arr2[0];
}
const blob = new Blob(result, { type: contentType });
saveAs(blob, fileName);
If you keep handling the download as an Observable instead of transforming it into a Promise you could catch the complete Observable event and from there trigger anything you need
//pseudo-code
this.service.download(this.role,element).subscribe(
result=>{
//your result code
},
(error)=>console.log(error),
()=>console.log('observable is complete)
)