Commit c3172d40 authored by Léonard Treille's avatar Léonard Treille
Browse files

Add global application loader

parent 1115cbad
<router-outlet></router-outlet>
<div class="app-loader" *ngIf="displayLoader" @fade>
<div class="logo-wrapper">
<svg width="128" height="128">
<use xlink:href="#m-logo" />
</svg>
</div>
</div>
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Router, NavigationEnd, NavigationStart } from '@angular/router';
import { environment } from 'src/environments/environment';
import { MatomoInjector, MatomoTracker } from 'ngx-matomo';
import { takeUntil, filter } from 'rxjs/operators';
import { takeUntil, filter, tap } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { trigger, transition, style, animate, keyframes } from '@angular/animations';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
styleUrls: ['./app.component.scss'],
animations: [
trigger('fade', [
transition(':enter', [
animate(500, keyframes([
style({ transform: 'scale3d(1, 1, 1)', opacity: 0, offset: 0 }),
style({ transform: 'scale3d(1.25, 0.75, 1)', opacity: 1, offset: 0.3 }),
style({ transform: 'scale3d(0.75, 1.25, 1)', offset: 0.4 }),
style({ transform: 'scale3d(1.15, 0.85, 1)', offset: 0.5 }),
style({ transform: 'scale3d(.95, 1.05, 1)', offset: 0.65 }),
style({ transform: 'scale3d(1.05, .95, 1)', offset: 0.75 }),
style({ transform: 'scale3d(1, 1, 1)', offset: 1 }),
]))
]),
transition(':leave', [
style({ opacity: 1 }),
animate(500, style({ opacity: 0 }))
])
])
]
})
export class AppComponent implements OnInit, OnDestroy {
displayLoader = false;
private unsubscriber = new Subject<void>();
constructor(
......@@ -24,13 +46,20 @@ export class AppComponent implements OnInit, OnDestroy {
if (environment.matomo) {
this.matomoInjector.init(environment.matomoConfig.url, environment.matomoConfig.id);
}
this.router.events.pipe(
tap((event) => {
if (event instanceof NavigationStart) {
this.displayLoader = true;
}
}),
filter(event => event instanceof NavigationEnd),
takeUntil(this.unsubscriber)
).subscribe(event => {
if (environment.matomo) {
this.matomoTracker.trackEvent('navigation', this.router.url);
}
this.displayLoader = false;
});
}
......
......@@ -12,6 +12,10 @@
<meta name="description" content="Page web expérimentale d'affichage de l'affluence sur le réseau Tag.">
<style>
body {
overflow-y: scroll;
}
@keyframes app-loader-animation {
from {
transform: rotate(0deg);
......
......@@ -73,3 +73,30 @@ button[type="submit"].affluence-submit-btn {
}
}
}
body {
overflow-y: scroll;
}
.app-loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
body.dark-theme & {
background: map_get($mpwa-dark-background, background);
}
body.light-theme & {
background: map_get($mpwa-light-background, background);
}
.logo-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment