UI: Introduce initial page loading spinner

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>

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

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>