feat: add loader for app in order to prevent render issue

src/app/app.component.html

 <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>

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;
+  }
 }

src/app/app.component.ts

 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 {