From 9cbb1b1066b2d205c3ef20385e639ba6aed2f6e9 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Wed, 25 May 2022 18:04:36 +0200
Subject: [PATCH] feat: add loader for app in order to prevent render issue
---
src/app/app.component.html | 6 +++++-
src/app/app.component.scss | 17 ++++++++---------
src/app/app.component.ts | 26 ++++++++++++++++++++++++--
3 files changed, 37 insertions(+), 12 deletions(-)
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 555341ffe..a5afdc516 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,9 +1,13 @@
<div class="app-container">
<app-header></app-header>
<div class="app-body">
+ <div *ngIf="loading" class="loader">
+ <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
+ </div>
+ <ng-container> </ng-container>
<router-outlet name="left-pane"></router-outlet>
<router-outlet></router-outlet>
<router-outlet name="print"></router-outlet>
- <router-outlet name="footer"></router-outlet>
+ <router-outlet *ngIf="!loading" name="footer"></router-outlet>
</div>
</div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 442de430c..f6ccc9acc 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -20,13 +20,12 @@
height: calc(100vh - #{$header-height});
}
-.motif {
- background-color: $primary-color;
- background-size: 58px 58px;
- background-position: 0px 2px, 4px 35px, 29px 31px, 33px 6px, 0px 36px, 4px 2px, 29px 6px, 33px 30px;
- background-image: linear-gradient(335deg, $white 23px, transparent 23px),
- linear-gradient(155deg, $white 23px, transparent 23px), linear-gradient(335deg, $white 23px, transparent 23px),
- linear-gradient(155deg, $white 23px, transparent 23px), linear-gradient(335deg, $white 10px, transparent 10px),
- linear-gradient(155deg, $white 10px, transparent 10px), linear-gradient(335deg, $white 10px, transparent 10px),
- linear-gradient(155deg, $white 10px, transparent 10px);
+.loader {
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ &.loader-gif {
+ max-height: 185px;
+ }
}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7534c6098..c8a2e3bb5 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
+import { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';
import { ProfileService } from './profile/services/profile.service';
import { AuthService } from './services/auth.service';
import { RouterListenerService } from './services/routerListener.service';
@@ -12,7 +12,8 @@ import { PrintService } from './shared/service/print.service';
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
- title = 'resin';
+ public title = 'resin';
+ public loading = true;
constructor(
public printService: PrintService,
@@ -32,6 +33,27 @@ export class AppComponent implements OnInit {
this.routerListener.loadRouting();
// handle pwa update
this.updateService.subscribeUpdate();
+
+ this.router.events.subscribe((event) => {
+ switch (true) {
+ case event instanceof NavigationStart: {
+ this.loading = true;
+ break;
+ }
+
+ case event instanceof NavigationEnd:
+ case event instanceof NavigationCancel:
+ case event instanceof NavigationError: {
+ setTimeout(() => {
+ this.loading = false;
+ }, 100);
+ break;
+ }
+ default: {
+ break;
+ }
+ }
+ });
}
ngOnInit(): void {
--
GitLab