diff --git a/src/app/app.component.html b/src/app/app.component.html
index 555341ffe057cb81ce97673b9df2517b9e66a2f5..a5afdc51616968078d2bae7d1249adb71da37652 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 442de430c63451ad2cb90e2961fe84c282bcc7fd..f6ccc9acce3e15a64cf7aa62f13a4ed52a6797b7 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 7534c609808246e9c6beea2482b76fa12850933e..c8a2e3bb52ba34504346327d366444ac92896dee 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 {