Teradata / covalent

Teradata UI Platform built on Angular Material
https://teradata.github.io/covalent/
MIT License
2.23k stars 359 forks source link

Circular Progress loader remains static [complete circle] and doesn't animate #1352

Closed majhoos closed 2 years ago

majhoos commented 5 years ago

I have the following LoaderInterceptor:

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { TdLoadingService } from "@covalent/core";
import { Observable } from "rxjs/observable";
import { tap } from "rxjs/operators";

@Injectable({
    providedIn: "root",
})
export class LoaderInterceptor implements HttpInterceptor {
    constructor(private loadingService: TdLoadingService) { }
    public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        this.showLoader();
        return next.handle(req).pipe(tap((event: HttpEvent<any>) => {
            if (event instanceof HttpResponse) {
                this.onEnd();
            }
        },
            (err: any) => {
                this.onEnd();
            }));
    }
    private onEnd(): void {
        this.hideLoader();
    }
    private showLoader(): void {
        this.loadingService.register("configFullscreenDemo");
    }
    private hideLoader(): void {
        this.loadingService.resolve("configFullscreenDemo");
    }
}

I provide above service in my core.module similar to below:

        {
            provide: HTTP_INTERCEPTORS,
            useClass: LoaderInterceptor,
            multi: true,
        },

I configure my loadingService in my app.component.ts similar to below:

  constructor(private router: Router, private iconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer, private loadingService: TdLoadingService  {
    this.registerIcons();

    this.loadingService.create({
      name: "configFullscreenDemo",
      mode: LoadingMode.Indeterminate,
      type: LoadingType.Circular,
      color: "primary",
    });

  }

Above works perfectly fine however the spinner always shows a complete circle and remains static while a request is in progress: static-circular-progress

Is this a bug or I am doing something wrong?

For your information I have the following packages installed:

  "dependencies": {
    "@agm/core": "^1.0.0-beta.5",
    "@angular/animations": "^7.2.1",
    "@angular/cdk": "^7.2.1",
    "@angular/common": "^7.2.1",
    "@angular/compiler": "^7.2.1",
    "@angular/core": "^7.2.1",
    "@angular/flex-layout": "^7.0.0-beta.19",
    "@angular/forms": "^7.2.1",
    "@angular/http": "^7.2.1",
    "@angular/material": "^7.2.1",
    "@angular/platform-browser": "^7.2.1",
    "@angular/platform-browser-dynamic": "^7.2.1",
    "@angular/pwa": "^0.12.2",
    "@angular/router": "^7.2.1",
    "@angular/service-worker": "^7.2.1",
    "@covalent/core": "^2.0.0",
    "@covalent/http": "^2.0.0",
    "@covalent/markdown": "^2.0.0",
    "@swimlane/ngx-charts": "^10.0.0",
    "babel-polyfill": "^6.26.0",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.6.3",
    "d3": "^5.7.0",
    "file-saver": "^2.0.0",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "lodash": "^4.17.11",
    "moment": "^2.24.0",
    "oidc-client": "^1.6.1",
    "primeng": "^7.0.4",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.28"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.12.2",
    "@angular/cli": "^7.2.2",
    "@angular/compiler-cli": "^7.2.1",
    "@angular/language-service": "^7.2.1",
    "@types/file-saver": "^2.0.0",
    "@types/jasmine": "^3.3.7",
    "@types/jasminewd2": "^2.0.6",
    "@types/lodash": "^4.14.120",
    "@types/node": "^10.12.18",
    "codelyzer": "^4.5.0",
    "ghooks": "^2.0.4",
    "jasmine": "^3.3.1",
    "jasmine-core": "^3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.4",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "^5.4.2",
    "rxjs-tslint-rules": "^4.15.0",
    "ts-node": "^8.0.1",
    "tslint": "^5.12.1",
    "typescript": "^3.1.3"
  },
jeremysmartt commented 5 years ago

What browser(s) and version(s) are you seeing this on? Can you also provide a stackblitz for this?