I use Angular 7. I deal with documents When I click on "INDEXER" button, a second tab is opened with content of the first document and a form. When the form is filled, the second document appears on this second tab etc... When all the documents are ok, this second tab close and and the first main tab must be refreshed.

Code for second tab :

iterate(index) {
this.loadingAction = false;
if (index < this.workflowList.length) {
  this.getDetails(this.workflowList[index]);
} else {
  localStorage.setItem('actualise', 'true');
  window.close();
}
 }

Code for the first tab

 ngOnInit() {
const that = this;

// COMMUNICATION INTER ONGLETS
window.addEventListener('storage', (event) => {
  console.log(event.key)
  // console.log('event storage = LocaleStorage : ' + event.storageArea !== localStorage);
  if (event.storageArea !== localStorage) {
    return;
  }
   if (event.key === 'actualise') {
   // if (event.storageArea.getItem('actualise') === 'true') {
     console.log('appel backend')
     this.refresh();
  } else {
     console.log(localStorage.getItem('actualise'));
   }
});
}

Problem is that backend is called multiple times and when there are a lot of documents, it's very long.

I updated code in order the backend is called one time, it works but the screen is not refreshed

Original : Backend called multiple time and screen refresh

Update: backend called one time but screen is not refreshed

How can I solve that ?