diff --git a/src/app/app.component.css b/src/app/app.component.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..fc2b98b5d8a2ff2a62b4af4667905278e9d2bd7f 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -0,0 +1,6 @@
+#progress {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index b6776580b2eda973de87abed0bf7b424058a2ae3..eb3746107bd5a455352e9a681d346d1efef75728 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,2 +1,2 @@
-<app-splash *ngIf="!active"></app-splash>
+<mat-progress-bar id="progress" mode="indeterminate" color="primary" *ngIf="loading"></mat-progress-bar>
<router-outlet></router-outlet>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 18e753b560adc31a3791d77a85d01c057cdb2ae5..4e340b53cdc5bc0196b33a40cb12608cd7886de0 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,12 +1,6 @@
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Title } from '@angular/platform-browser';
-import { Router,
- Event as RouterEvent,
- NavigationStart,
- NavigationEnd,
- NavigationCancel,
- NavigationError ,
- ActivatedRoute, } from '@angular/router';
+import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { Observable, Subscription } from 'rxjs';
import { filter, map, mergeMap } from 'rxjs/operators';
import { LoaderService } from './core';
@@ -17,9 +11,8 @@ import { LoaderService } from './core';
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
-
- loading = true;
- active = false;
+
+ loading = false;
sub = new Subscription();
constructor(
@@ -29,42 +22,17 @@ export class AppComponent implements OnInit, OnDestroy {
private loaderService: LoaderService,
) { }
- // Shows and hides the loading spinner during RouterEvent changes
- navigationInterceptor(event: RouterEvent): void {
- if (event instanceof NavigationStart) {
- this.loading = true
- }
- if (event instanceof NavigationEnd) {
- this.loading = false
- }
-
- // Set loading state to false in both of the below events to hide the spinner in case a request fails
- if (event instanceof NavigationCancel) {
- this.loading = false
- }
- if (event instanceof NavigationError) {
- this.loading = false
- }
- }
-
ngOnInit() {
this.sub.add(
this.title$().subscribe(title => this.titleService.setTitle(title))
);
this.sub.add(
this.loaderService.loading().subscribe(loading => {
- this.active = !loading;
+ this.loading = loading;
})
);
}
- private active$(): Observable<boolean> {
- return this.router.events.pipe(
- filter(event => event instanceof NavigationStart || event instanceof NavigationEnd),
- map(event => event instanceof NavigationEnd),
- );
- }
-
private title$(): Observable<string> {
return this.router.events.pipe(
// When a navigation finishes
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 493790c5ef50541fa257fddbda48cd650b846437..90147bbc9237b34a42c78684f29664041f144d79 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -24,7 +24,6 @@ import { SignupPageComponent } from './signup-page/signup-page.component';
// Services
import { StudentService } from './signup-page/student.service';
import { MessageService } from './core';
-import { SplashComponent } from './splash/splash.component';
registerLocaleData(localeFR);
@@ -32,7 +31,6 @@ registerLocaleData(localeFR);
declarations: [
AppComponent,
SignupPageComponent,
- SplashComponent,
],
imports: [
BrowserModule,
diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts
index be67d8586e257685732ede189e921f30bce29b39..1788ec7f8895f2ed40eb3df2805daa2da635988d 100644
--- a/src/app/core/core.module.ts
+++ b/src/app/core/core.module.ts
@@ -6,7 +6,6 @@ import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { MarkdownModule, MarkdownComponent, MarkdownPipe } from 'ngx-markdown';
import { TokenInterceptor } from './auth';
import { LoaderService } from './loader.service';
-import { LoaderInterceptor } from './loader.interceptor';
import { MessageModule } from './messages';
import { FuzzyPipe, LineBreaksPipe } from './pipes';
import { NotFoundComponent } from './not-found';
@@ -33,7 +32,6 @@ import { ErrorPageComponent } from './error-page';
providers: [
LoaderService,
{ provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },
- { provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptor, multi: true },
],
exports: [
MessageModule,
diff --git a/src/app/core/loader.interceptor.ts b/src/app/core/loader.interceptor.ts
deleted file mode 100644
index cb4693cf3031b4c277b32bc28e13013d4ef512e6..0000000000000000000000000000000000000000
--- a/src/app/core/loader.interceptor.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { tap } from 'rxjs/operators';
-import { LoaderService } from './loader.service';
-
-
-@Injectable()
-export class LoaderInterceptor implements HttpInterceptor {
-
- constructor(private loaderService: LoaderService) { }
-
- intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
- this.loaderService.loading$.next(true);
- return next.handle(request).pipe(
- tap(() => this.loaderService.loading$.next(false)),
- );
- }
-
-}
diff --git a/src/app/core/loader.service.ts b/src/app/core/loader.service.ts
index 356d88b112f2871779c3ef716ba5b7c49e643b36..9b349b5ad5cd1bb478e965f9530d88c54e469e54 100644
--- a/src/app/core/loader.service.ts
+++ b/src/app/core/loader.service.ts
@@ -1,17 +1,19 @@
import { Injectable } from '@angular/core';
+import { Router, NavigationStart, NavigationEnd, NavigationCancel } from '@angular/router';
import { Observable, BehaviorSubject } from 'rxjs';
-import { distinctUntilChanged } from 'rxjs/operators';
+import { map, debounceTime, tap, filter } from 'rxjs/operators';
@Injectable()
export class LoaderService {
- public loading$: BehaviorSubject<boolean> = new BehaviorSubject(false);
+ constructor(private router: Router) {}
public loading(): Observable<boolean> {
- return this.loading$.asObservable().pipe(
- // Prevent having multiple false's or multiple true's
- distinctUntilChanged(),
+ return this.router.events.pipe(
+ filter(e => e instanceof NavigationStart || e instanceof NavigationEnd || e instanceof NavigationCancel),
+ debounceTime(100), // don't mark fast navigation changes as navigating
+ map((e) => e instanceof NavigationStart),
);
}
diff --git a/src/app/splash/splash.component.html b/src/app/splash/splash.component.html
deleted file mode 100644
index 569a3dccfe6b0a0f3a92de7395b380418246694d..0000000000000000000000000000000000000000
--- a/src/app/splash/splash.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div id="splash">
- <mat-progress-bar mode="indeterminate" color="primary"></mat-progress-bar>
-</div>
diff --git a/src/app/splash/splash.component.scss b/src/app/splash/splash.component.scss
deleted file mode 100644
index 0ad89ce139f8c04e2edea29a60c9a4ca37955aec..0000000000000000000000000000000000000000
--- a/src/app/splash/splash.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-#splash {
- z-index: 9999999;
- position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
-
- i {
- background: white;
- border-radius: 50%;
- width: 1.3em;
- height: 1.3em;
- display: flex;
- justify-content: center;
- align-items: center;
- }
-}
diff --git a/src/app/splash/splash.component.ts b/src/app/splash/splash.component.ts
deleted file mode 100644
index 2f403a885cdcc6ed2e373b939125b8333aa44e2c..0000000000000000000000000000000000000000
--- a/src/app/splash/splash.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'app-splash',
- templateUrl: './splash.component.html',
- styleUrls: ['./splash.component.scss']
-})
-export class SplashComponent implements OnInit {
-
- constructor() { }
-
- ngOnInit() {
- }
-
-}