feat(agent): Add loading screen (#444)

* feat(uhk-message): Add spin animation

* feat(agent): Add loading page

* fix device connected / disconnected events

packages/uhk-web/src/app/components/uhk-message/uhk-message.component.html

@@ -1,5 +1,7 @@
 <span class="uhk-message-wrapper">
-    <img class="agent-logo" src="assets/images/agent-icon.png"/>
+    <img class="agent-logo spin-logo"
+         [ngClass]="{'spin-logo': rotateLogo}"
+         src="assets/images/agent-icon.png"/>
     <div class="messages">
         <h1> {{ title }} </h1>
         <h2> {{ subtitle }} </h2>

packages/uhk-web/src/app/components/uhk-message/uhk-message.component.scss

@@ -17,3 +17,23 @@
         margin-top: 10px;
     }
 }
+
+.spin-logo {
+    -webkit-animation: spin 2s ease-in-out infinite;
+    -moz-animation: spin 2s ease-in-out infinite;
+    animation: spin 2s ease-in-out infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0);
+    }
+
+    50% {
+        transform: rotate(360deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}

packages/uhk-web/src/app/components/uhk-message/uhk-message.component.ts

@@ -9,4 +9,5 @@ import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 export class UhkMessageComponent {
     @Input() title: string;
     @Input() subtitle: string;
+    @Input() rotateLogo = false;
 }