How to show and hide mat spinner on API call

Question

I was trying to show mat spinner on API method call. Below is my API call code on which I subscribe to get the data, Usually it is just 2 min work but this time didn't work, also I know this happens due to a subscribe method so any easy way to implement that?

 this.loading = true;

 this.ticketModelService.farmerList
  .subscribe(value => {
    if (value) {
      this.farmerList = value.data;
      this.paginationNumbers = value.recordsFiltered
    }
  })

  this.loading = false;

EDIT: Empty screen for 2 ms.

Answer 1

I think your issue is your spinner appears and suddenly disappears. So here your loading variable will not wait for API to process and it will disappear within ms. So you should hide your loader in your API callback. So until you're API is processing, loader will stay there. And after getting response you can hide you're loader even if it's an error.

 this.loading = true;

 this.ticketModelService.farmerList
  .subscribe(value => {
     this.loading = false;
    if (value) {
      this.farmerList = value.data;
      this.paginationNumbers = value.recordsFiltered
    }
  })

Update your code as above.