How to check whether already service call is completed or not in angular 7?

Question

Assume I have a certain fetch service call on ngOnInit lifecycle hook. But before that call gives response I switched to another component and came back to same first component and hence another fetch service call went.
I have a ngx-ui-loader attached to the service call. Now what heppens, the very first service call gives response so the loader stops, but UI is not updated. The UI got updated when the second service call gave response.

Hence there was some time delay between the stopped loader and the updated UI.

How to prevent this? or
How to checked if any relevent service call is already there in progress then we can again subscribe it and get response and update UI?

Code: component.ts

user:any = [];

ngOnInit() {
    this.commonService.getUserList().subscribe(response => {
        this.users = response.body;
    });
}

component.html

<ng-container *ngFor="let user of users">
    <p>{{ user }}</p>
</ng-container>

could you provide code of this functionality? without your code answer could be irrelevant to what you are looking for — Andrei
@Andrei I added the code for your better understanding. Thank you. — Shubham
@MikeS. that code is half of the answer. I dont want the service call to go if the service call is already there in pending state. — Shubham

Andrei Andrei · Accepted Answer · 2020-09-21T11:55:10

you could refactor your service to reuse data. in this way in scenario you are describing this will be just a single http call

private userList$ = this.http.get<User[]>('url').pipe(shareReplay(1));
public getUserList() {
   return this.userList$;
}

How to check whether already service call is completed or not in angular 7?

1 Answers