Show loader until page is fully loaded Angular 2+

Question

I am using ng2-admin theme for angular 2+. I am using API's to fetch data. The problem I am facing is that loader hides but data is still not loaded so the page first show skeleton of the page then load data. it looks odd.

I want the loader to show until all the data is rendered on the page.

First, I thought its the issue of API response but I see that API is completed it's just the browser rendering data which takes time. For an idea, you can see in this example

this.loader = ture    
ApiCall.subscribe(response =>{
    logic();
    this.loader = false;
})

Loader gets hide but data is still rendering.

Thanks in anticipation.

add setTimeout around code who have the role to hide loader. to give some time to angular to digest request answer. — Yanis-git, Mar 29 '18 at 07:44

score 0 · Answer 1 · edited Aug 06 '18 at 05:26

0

As far as I know that two solution's are here.

If you have multiple callback function and want to get all data after all callback is completed, you use Promise.all(iterable) Reference
If you want to notify after view load, use ngAfterViewInit Reference

Edit Try to use this code

this.loader = true
ApiCall.subscribe(response => {
    logic();        
    setTimeout(() => {
       this.loader = false;
    }, 0);
});

I think both solution will help you.

edited Aug 06 '18 at 05:26

Christian Esperar

528
5
19

answered Mar 29 '18 at 08:13

Shohel

3,886
4
38
75

Not the issue of the callback function. Callback functions are already processed but data is not displayed on the page. Event ngAfterViewInit function runs first then data gets displayed. – Yasir Ijaz Mar 29 '18 at 08:57
Its a problem all over the site. let me give you an idea. Let me edit the question – Yasir Ijaz Mar 29 '18 at 09:08

Yerkon · Answer 2 · 2018-03-29T09:38:05.320

0

Can you try like this:

 this.loader = true;    
    ApiCall.subscribe(response =>{
        logic();
        setTimeout(() => { this.loader = false; })     
    })

So, it will only hide loader in the next tick(Change Detection Cycle);

edited Mar 29 '18 at 09:38

answered Mar 29 '18 at 09:19

Yerkon

4,548
1
18
30

I tried it but I have to provide time here. So sometimes data load early but the loader is running and sometimes timeout early but data is still not loaded. I need a way to control browser rendering data. – Yasir Ijaz Mar 29 '18 at 09:33
@YasirIjaz, you don't need to provide time. It will run immediately in the next run. Call it like example above. – Yerkon Mar 29 '18 at 09:35

score 0 · Answer 3 · answered Aug 06 '18 at 06:30

In your main app.component try

this.router.events.subscribe((event) => {
    if ((event) instanceof RouteConfigLoadStart) {
   //   loader =true ;
    } else if ((event) instanceof RouteConfigLoadEnd) {
    // loader=false;
    }
});

It's better to write a common service for loader and use it like,
this.loaderService.show(); this.loaderService.hide();

Show loader until page is fully loaded Angular 2+

3 Answers3