How to stop the spinner after the loading finishes in an angular app?

Question

I am implementing a spinner which is working fine initially, but it continues to spin even after the page has been loaded.

loader.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class LoaderService {
    public status: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

    display(value: boolean) {
        this.status.next(value);
    }
}

app.module.ts

imported the LoadService and added it to the providers array

app.component.html

I am checking the value of showLoader to see if it is true or false as true would show the loader and false wouldn't.

<router-outlet>
   <span *ngIf="showLoader" class="loading"></span>{{showLoader}}
</router-outlet>

app.component.ts

imported LoaderService

export class AppComponent {
  //for the spinner
  showLoader: boolean;
  //LoaderService is for the spinner
  constructorprivate loaderService: LoaderService) { }
  //for the spinner
  ngOnInit() {
    this.loaderService.status.subscribe((val: boolean) => {
      this.showLoader = val;
    });
  }
}

custom.component.ts

@Component({
  selector: 'app-custom',
  templateUrl: './custom.component.html',
  styleUrls: ['./custom.component.css']
})
export class CustomComponent implements OnInit {

    //LoaderService is for the spinner
    constructor(private loaderService: LoaderService) { }

    ngOnInit() {
        //http call starts
        this.loaderService.display(true);
    }

    ngAfterViewInit() {
        d3.json("https://...", function(data) {
            createChart(data);
        });
        function createChart(data) {
            ...

            dc.renderAll();
        }//end of function  
    }//end of ngAfterView
}//end of export class

I am showing some dc charts and I want the spinner to stop once the charts are displayed.

I need to stop the spinner with this.loaderService.display(false); but using it right after dc.renderAll(); is showing the value of showLoader as false and thereby no spinner appears.

Any kind of help would be greatly appreciated. Thanks.

Answer 1

One option would be to add a default value for showLoader in your AppComponent. You can set it to true as a default with showLoader: boolean = true;

export class AppComponent {
  //for the spinner
  showLoader: boolean = true;
  //LoaderService is for the spinner
  constructorprivate loaderService: LoaderService) { }
  //for the spinner
  ngOnInit() {
    this.loaderService.status.subscribe((val: boolean) => {
      this.showLoader = val;
    });
  }
}

The spinner will be shown by default. Then you can set it like this.

custom.component.ts

  ngAfterViewInit() {
    let loaderService = this.loaderService;
    d3.json("https://...", function(data) {
        createChart(data);
    });
    function createChart(data) {
        ...

        dc.renderAll();
        loaderService.display(false);
    }//end of function  
  }//end of ngAfterView

Answer 2

If understood you correctly, dc.renderAll() is an async function, therefore you'll need to restructure your app so that you hide the spinner AFTER the function has actually ended processing.

One way to do this is by turning the renderAll() into an observable and subscribing to it, calling loaderService.display(false) inside the subscription.

dc.renderAll().subscribe(
  value => this.loaderService.display(false)
)