Show loading animation while retrieving data (Angular 10)

Question

I am trying to show a loading animation in Angular 10 while I am retrieving data. I can show the loading animation if I use a specific time value but I cannot get it to show just while the data is being gathered. Please see a snippet of my code below. Instead of manually calling the loading animation I would like it to only run while the 'getAllDocuments' function is running. Sometimes my hard coded time value is too short and others too long. I would like it to be correct every time.


ngOnInit() {
    this.getAllDocuments();
    this.triggerLoadingAnimation(12);
  }

  ngAfterViewInit(): void {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  }

  public triggerLoadingAnimation(num){
    this.spinner.show();

    setTimeout(() => {
      this.spinner.hide();
    }, num*1500);
  }

  async getAllDocuments() {
    this.repoService.getData('/api/Prometheus/Documents')
    .subscribe(res => {
      this.dataSource.data = res as Document[];
    })
  }

Check out this https://www.npmjs.com/package/ng-http-loader. This will work globally http call made at the back end. No need to hide and show a loader manually. — Santosh Shinde, Sep 04 '20 at 14:22
start spinner before send request and finish it finalize() method of request — mr. pc_coder, Sep 04 '20 at 14:39

score 0 · Accepted Answer · answered Sep 04 '20 at 14:23

0

You were close.
I've also added error handling, remove unnecessary async, and run the ajax call in constructor instead of ngOnInit to avoid unnecessary waiting time.

constructor(private repoService: RepoService) {
    this.getAllDocuments();
}

ngOnInit() {
  // stuff that really need @Input data to be filled
}

ngAfterViewInit(): void {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
}

getAllDocuments() {
    this.spinner.show();
    this.repoService.getData('/api/Prometheus/Documents')
    .subscribe((res: Document[]) => {
      this.dataSource.data = res;
      this.spinner.hide();
    },
    error => {
      this.spinner.hide();
      console.error('error while retrieving documents', error);
      // handle error
    })
}

answered Sep 04 '20 at 14:23

Random

3,158
1
15
25

error method is not enough for any error you need to use finalize method to hide spinner – mr. pc_coder Sep 04 '20 at 14:37
this worked with minor tweaking thank you very much! – jak dev Sep 04 '20 at 15:37
1

@pc_coder I don't think so. `finalize` triggers on observable completion. For HTTP calls, it will always trigger error or success. Can you explicit a case where the observable would complete without triggering success or error handlers ? – Random Sep 04 '20 at 15:57
@Random, you are correct but in this case you have do the code twice, in success as well as in error, finalize is meant for these purposes – Mandeep Singh Sep 04 '20 at 18:21
@MandeepSingh I think error does not trigger finalize callback. There is no way to do the same as a `try/catch/finally` with Observables. – Random Sep 05 '20 at 08:06

Mandeep Singh · Answer 2 · 2020-09-04T18:15:41.127

You are doing it wrong, you should call the spinner to show when API call is made and hide it away when data is retrieved.

Better way is to call it in constructor as ngOnInit is called when finished creating a component DOM, injected all required dependencies through constructor and processed input bindings

constructor() {
    this.getAllDocuments();
}


ngOnInit() {
    //this.getAllDocuments();
  }

  ngAfterViewInit(): void {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  }

  async getAllDocuments() {
    this.spinner.show();
    this.repoService.getData('/api/Prometheus/Documents')
    .subscribe((res: Document[]) => {
      this.dataSource.data = res;
    }, (err) => {
        //handle the errors
         console.log(err);
    }, () => {
        this.spinner.hide();
    });
  }

error method is not enough for hide for any error use one time in finalize() method — mr. pc_coder, Sep 04 '20 at 14:39
edited it, handling hiding of spinner animation in finalize instead of success and error both — Mandeep Singh, Sep 04 '20 at 18:19

score 0 · Answer 3 · answered Sep 04 '20 at 19:09

Loading a spinner is a good user experience technique but how many spinners will you need to load to satisfy the user? Probably depending on the size of the application. Since you need to show a spinner when the data is being retrieved, having a global spinner would be a much better way to go. With a global spinner, whenever data is being retrieved, the spinner will show. Below is a good implementation of an interceptor to show a spinner Using Interceptor to show spinner

score -1 · Answer 4 · answered Sep 04 '20 at 14:22

-1

You may use below code:

getAllDocuments() {
 this.spinner.show(); // SHOW WHEN DATA IS LOADING
    this.repoService.getData('/api/Prometheus/Documents')
    .subscribe(res => {
      this.dataSource.data = res as Document[];
     this.spinner.hide();  //  HIDE WHEN DATA IS LOADED
    })
  }

answered Sep 04 '20 at 14:22

abhay tripathi

3,547
4
20
25

this logic is wrong you dont hide spinner here in error case! You need to hide in finalize – mr. pc_coder Sep 04 '20 at 14:36
@pc_coder The question is to show spinner while loading data. And I have given answer to it. – abhay tripathi Sep 04 '20 at 14:58
@pc_coder As for other given solution, even others are not handling other possible cases i.e empty response, server side error codes, server faults. – abhay tripathi Sep 04 '20 at 15:01

score -1 · Answer 5 · answered Sep 04 '20 at 14:22

-1

You can show and hide spinner in the same function rather than creating new function for that.

async getAllDocuments() {
    this.spinner.show();
    this.repoService.getData('/api/Prometheus/Documents')
    .subscribe(res => {
          this.dataSource.data = res as Document[];
          this.spinner.hide();
    });
    
}

answered Sep 04 '20 at 14:22

Suroor Ahmmad

1,110
4
23
33

Yes, it need to be placed inside. updated the answer. – Suroor Ahmmad Sep 04 '20 at 14:31
1

this logic is wrong you dont hide spinner here in error case! You need to hide in finalize – mr. pc_coder Sep 04 '20 at 14:36
@pc_coder can you please show an example on how YOU would do this? – jak dev Sep 04 '20 at 15:12

Show loading animation while retrieving data (Angular 10)

5 Answers5