CODEWITHSUNDEEP
htmlangulartypescriptservicecomponents
SFAH
SFAH

Reputation: 534

Angular5: Spinner is not working perfectly on page load

Following is my service where I emits two events dataLoaded and loadingData I want to show and hide GIF image when data is loading and loaded respectively, and in component I catch both events and change the value of Boolean variable. But when page loads first time initially loading GIF is not showing and when data loaded then GIF appeared and if I select filter to search then it works fine and also when I debug the code the value of showLoading updated successfully

Service

import { forwardRef, Injectable, EventEmitter } from '@angular/core';
    import { Http, Headers, RequestOptions, Response, URLSearchParams } from '@angular/http';
    import 'rxjs/add/operator/toPromise';


    @Injectable()
    export class SearchService {
     loadingData = new EventEmitter();
        dataLoaded = new EventEmitter();
     pages: any = {};
        searchResults = [];
     search() {
            this.loadingData.emit("ShowLoading")
            this.performSearch().then(response => {
                this.searchResults = response.json();
                this.pages = this.searchResults['pages'];
                this.searchResults = this.searchResults['data'];
                this.resultsUpdated.emit('SearchResultsUpdated');
                this.dataLoaded.emit("HideLoading")
            }, error => {
                   this.dataLoaded.emit("HideLoading")
             });
        }
    }

Component

import { Component, ViewChild, ElementRef } from '@angular/core';
import { SearchService } from '../../search.service';
/*import {Alert} from "../../alert.component";*/
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { SavedSearchComponent } from '../saved-search/saved-search.component';
@Component({
 selector: 'property-onion-search-results',
  templateUrl: './search-results.component.html'
})

export class SearchResultsComponent {
  @ViewChild('searchResultArea') resultsArea: ElementRef;
  searchResults: any[] = null;
  closeResult: string;
  view = 'regular';
  resultInformation: any[];
  filterString: string = "";
  resultCount: number = 0;
  numbers: any[] = null;
  showLoading;

  constructor(private searchService: SearchService, private modalService: NgbModal) {

    this.searchService.resultsUpdated.subscribe(data => {
      this.searchResults = this.searchService.getResults();
      this.filterString = this.searchService.toString();
      this.resultCount = this.searchService.pages.total;
      var pages = this.searchService.pages.number_of_pages;
      if (this.searchService.pages.total > 25) {
        this.numbers = new Array(pages).fill(1).map((x, i) => i);
      } else {
        this.numbers = null;
      }
      this.resultsArea.nativeElement.click(); // THis is a hack to fix refresh issue of this area. This area doesn't get refreshed unless you click somewhere in the browser.          
    });

    this.searchService.loadingData.subscribe(data => {
      console.log("show")
      this.showLoading = true
    });
    this.searchService.dataLoaded.subscribe(data => {
      console.log("hide")
      this.showLoading = false
    });

  }
}

html

<img class="loading" *ngIf="showLoading" src="images/loader.gif"/>

Upvotes: 3

Views: 739

Answers (1)

Pterrat
Pterrat

Reputation: 1710

For initial loading you should define showLoading directly in your component : 

showLoading:boolean = true;

Upvotes: 2

Related Questions