From c9598a23ea3e8170f872b2c0c13a6964059076e5 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 3 Dec 2020 14:09:48 +0200
Subject: [PATCH] UI: Introduce initial page loading spinner

---
 ui-ngx/src/app/app.component.html |  2 +-
 ui-ngx/src/app/app.component.ts   | 10 +++-
 ui-ngx/src/index.html             | 76 ++++++++++++++++++++++++++++++-
 3 files changed, 84 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/src/app/app.component.html b/ui-ngx/src/app/app.component.html
index 6521e99533..7330d0c1c1 100644
--- a/ui-ngx/src/app/app.component.html
+++ b/ui-ngx/src/app/app.component.html
@@ -17,4 +17,4 @@
 -->
 <!--The content below is only a placeholder and can be replaced.-->
 
-<router-outlet></router-outlet>
+<router-outlet (activate)="onActivateComponent($event)"></router-outlet>
diff --git a/ui-ngx/src/app/app.component.ts b/ui-ngx/src/app/app.component.ts
index f7d290c5ca..ac3512694e 100644
--- a/ui-ngx/src/app/app.component.ts
+++ b/ui-ngx/src/app/app.component.ts
@@ -62,7 +62,7 @@ export class AppComponent implements OnInit {
     this.matIconRegistry.addSvgIconLiteral(
       'alpha-e-circle-outline',
       this.domSanitizer.bypassSecurityTrustHtml(
-        '<svg viewBox="0 0 24 24"><path d="M9,7H15V9H11V11H15V13H11V15H15V17H9V7M12,2A10,10 0 0,'+
+        '<svg viewBox="0 0 24 24"><path d="M9,7H15V9H11V11H15V13H11V15H15V17H9V7M12,2A10,10 0 0,' +
         '1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 ' +
         '0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" /></svg>'
       )
@@ -124,5 +124,11 @@ export class AppComponent implements OnInit {
   ngOnInit() {
   }
 
-}
+  onActivateComponent($event: any) {
+    const loadingElement = $('div#tb-loading-spinner');
+    if (loadingElement.length) {
+      loadingElement.remove();
+    }
+  }
 
+}
diff --git a/ui-ngx/src/index.html b/ui-ngx/src/index.html
index af49c0c938..f569c054e4 100644
--- a/ui-ngx/src/index.html
+++ b/ui-ngx/src/index.html
@@ -16,7 +16,7 @@
 
 -->
 <!doctype html>
-<html lang="en" style="width: 100%;">
+<html lang="en" style="width: 100%; height: 100%;">
 <head>
   <meta charset="utf-8">
   <title>ThingsBoard</title>
@@ -24,8 +24,82 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="thingsboard.ico">
+  <style type="text/css">
+
+    body, html {
+      height: 100%;
+      overflow: hidden;
+      background-color: rgb(250,250,250);
+    }
+
+    .tb-loading-spinner {
+      margin: auto;
+      z-index: 1;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      width: 136px;
+      height: 30px;
+      text-align: center;
+    }
+
+    .tb-loading-spinner > div {
+      width: 30px;
+      height: 30px;
+      margin-right: 10px;
+      background-color: rgb(43,160,199);
+
+      border-radius: 100%;
+      display: inline-block;
+      -webkit-animation: tb-bouncedelay 1.4s infinite ease-in-out both;
+      -moz-animation: tb-bouncedelay 1.4s infinite ease-in-out both;
+      animation: tb-bouncedelay 1.4s infinite ease-in-out both;
+    }
+
+    .tb-loading-spinner .tb-bounce1 {
+      -webkit-animation-delay: -0.32s;
+      -moz-animation-delay: -0.32s;
+      animation-delay: -0.32s;
+    }
+
+    .tb-loading-spinner .tb-bounce2 {
+      -webkit-animation-delay: -0.16s;
+      -moz-animation-delay: -0.16s;
+      animation-delay: -0.16s;
+    }
+
+    @-webkit-keyframes tb-bouncedelay {
+      0%, 80%, 100% { -webkit-transform: scale(0) }
+      40% { -webkit-transform: scale(1.0) }
+    }
+
+    @-moz-keyframes tb-bouncedelay {
+      0%, 80%, 100% { -moz-transform: scale(0) }
+      40% { -moz-transform: scale(1.0) }
+    }
+
+    @keyframes tb-bouncedelay {
+      0%, 80%, 100% {
+        -webkit-transform: scale(0);
+        -moz-transform: scale(0);
+        transform: scale(0);
+      } 40% {
+          -webkit-transform: scale(1.0);
+          -moz-transform: scale(1.0);
+          transform: scale(1.0);
+        }
+    }
+
+  </style>
 </head>
 <body class="tb-default">
   <tb-root></tb-root>
+  <div id="tb-loading-spinner" class="tb-loading-spinner">
+    <div class="tb-bounce1"></div>
+    <div class="tb-bounce2"></div>
+    <div class="tb-bounce3"></div>
+  </div>
 </body>
 </html>