Implement poc message in queue notifier (chat writing stuff)

src/app/messages/messages.component.html

@@ -6,6 +6,11 @@
     <div class="tao-grid-top-left"><span>Instructions</span></div>
     <div class="tao-grid-center-right"><button *ngIf="showNextButton" (click)="stepFSM()" class="tao-btn-rainbow">Next</button></div>
   </div>
+  <div *ngIf="messageInQueue" class="tfw-grid-message jumping-circle-container">
+    <div class="jumping-circle" id="jc1"></div>
+    <div class="jumping-circle" id="jc2"></div>
+    <div class="jumping-circle" id="jc3"></div>
+  </div>
   <div class="tfw-grid-message" *ngFor="let message of messages.slice().reverse()">
     <div class="tfw-grid-message-header">
       <img class="tao-grid-center-left" src="images/avataobot.svg"/>

src/app/messages/messages.component.scss

@@ -39,6 +39,38 @@
   100% { transform: scale(1,1); }
 }
 
+.jumping-circle-container {
+  display: flex;
+  padding-top: 1.3em;
+  padding-bottom: 1em;
+}
+
+.jumping-circle {
+  width: 0.35em;
+  height: 0.35em;
+  border-radius: 50%;
+  background-color: gray;
+  margin-top: 0.3em;
+  margin-left: 0.3em;
+  
+  animation-name: float;
+  animation-duration: 1.7s;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}
+
+#jc2 { animation-delay: 0.2s; }
+#jc3 { animation-delay: 0.45s; }
+
+@keyframes float {
+  0% { transform: translateY(0em); }
+  30% { transform: translateY(-0.5em); }
+  60% { transform: translateY(0.2em); }
+  80% { transform: translateY(0em); }
+  90% { transform: translateY(-0.5em); }
+  100% { transform: translateY(0em); }
+}
+
 .tfw-grid-message-header {
   display: grid;
   grid-template-columns: 1fr 5fr 8fr;

src/app/messages/messages.component.ts

@@ -19,6 +19,8 @@ import { Subject, Observer } from 'rxjs';
 })
 export class MessagesComponent implements OnInit {
   newMessage: Subject<MessagesMessage> = new Subject<MessagesMessage>();
+  messageInQueue = true;
+
   messages: MessagesMessage[] = [];
   messageQueueAttender: MessageQueueAttender;
   showNextButton: boolean = config.messages.showNextButton;