Closed majhoos closed 2 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:
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" },
What browser(s) and version(s) are you seeing this on? Can you also provide a stackblitz for this?
I have the following LoaderInterceptor:
I provide above service in my core.module similar to below:
I configure my loadingService in my app.component.ts similar to below:
Above works perfectly fine however the spinner always shows a complete circle and remains static while a request is in progress:![static-circular-progress](https://user-images.githubusercontent.com/7324946/53088911-fcdc1800-3502-11e9-91ee-4f967b6a1452.png)
Is this a bug or I am doing something wrong?
For your information I have the following packages installed: