Implement chat like "xy is writing..." bubble when messages are queued

src/app/messages/messages.component.ts

@@ -10,7 +10,7 @@ import { MessagesControlCommand } from '../message-types/messages-control-comman
 import { config } from '../config';
 import { CommandMessage } from '../message-types/command-message';
 import { MessageQueueMessage } from '../message-types/message-queue-message';
-import { Subject, Observer } from 'rxjs';
+import { Subject, Observer, BehaviorSubject } from 'rxjs';
 
 @Component({
   selector: 'app-messages',
@@ -39,6 +39,9 @@ export class MessagesComponent implements OnInit {
 
   ngOnInit() {
     this.newMessage.subscribe(this.handleMessage.bind(this));
+    this.messageQueueAttender.messageInQueue.subscribe(
+      (value) => this.messageInQueue = value
+    );
 
     this.websocketService.connect();
     this.websocketService.observeKey<MessagesMessage>('message').subscribe(
@@ -77,6 +80,8 @@ export class MessagesComponent implements OnInit {
 
 
 class MessageQueueAttender {
+  public messageInQueue = new BehaviorSubject<boolean>(false);
+
   private readonly charPerSecond: number;
   private lastMessageLength = 0;
   private queue: MessagesMessage[] = [];
@@ -99,11 +104,13 @@ class MessageQueueAttender {
     }
     if (this.queue.length === 0) {
       this.lastMessageLength = 0;
+      this.messageInQueue.next(false);
     }
   }
 
   private attendQueue() {
     if (this.queue.length > 0) {
+      this.messageInQueue.next(true);
       const timeoutSeconds = this.lastMessageLength / this.charPerSecond;
       setTimeout(
         () => {