From 6b8ccb8c337bc09a87cf85908b25ab4f1910f77a Mon Sep 17 00:00:00 2001
From: Sean <sean.f.t.engelhardt@gmail.com>
Date: Thu, 3 Jun 2021 11:12:56 +0200
Subject: [PATCH] Add pending state for chat message

Waits untill the server answers something before enabling chatting again
shows some spinner to indicate pending chat requests
---
 .../chat/components/chat-tabs/chat-tabs.component.html    | 4 +++-
 .../site/chat/components/chat-tabs/chat-tabs.component.ts | 8 ++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/client/src/app/site/chat/components/chat-tabs/chat-tabs.component.html b/client/src/app/site/chat/components/chat-tabs/chat-tabs.component.html
index d326e7562..4ed970bd7 100644
--- a/client/src/app/site/chat/components/chat-tabs/chat-tabs.component.html
+++ b/client/src/app/site/chat/components/chat-tabs/chat-tabs.component.html
@@ -34,13 +34,15 @@
             </span>
         </mat-hint>
         <mat-label>{{ 'Message' | translate }}</mat-label>
+        <mat-spinner *ngIf="messagePending" matSuffix diameter="30"></mat-spinner>
         <button
             mat-icon-button
             matSuffix
             type="submit"
             color="accent"
             matTooltip=" {{ 'Send' | translate }}"
-            [disabled]="!chatinput.value?.trim()?.length || newMessageForm.invalid"
+            *ngIf="!messagePending"
+            [disabled]="!chatinput.value?.trim()?.length || newMessageForm.invalid || messagePending"
         >
             <mat-icon>send</mat-icon>
         </button>
diff --git a/client/src/app/site/chat/components/chat-tabs/chat-tabs.component.ts b/client/src/app/site/chat/components/chat-tabs/chat-tabs.component.ts
index 92d21786f..cf151a822 100644
--- a/client/src/app/site/chat/components/chat-tabs/chat-tabs.component.ts
+++ b/client/src/app/site/chat/components/chat-tabs/chat-tabs.component.ts
@@ -26,6 +26,7 @@ import { ViewChatGroup } from '../../models/view-chat-group';
 export class ChatTabsComponent extends BaseViewComponentDirective implements OnInit {
     public chatGroupSubject: BehaviorSubject<ViewChatGroup[]>;
     public newMessageForm: FormGroup;
+    public messagePending = false;
     private messageControl: AbstractControl;
     public chatMessageMaxLength = 512;
     private selectedTabIndex = 0;
@@ -91,8 +92,12 @@ export class ChatTabsComponent extends BaseViewComponentDirective implements OnI
     }
 
     public send(): void {
+        if (this.messagePending) {
+            return;
+        }
         const message = this.messageControl.value?.trim();
         if (message) {
+            this.messagePending = true;
             const payload = {
                 text: message,
                 chatgroup_id: this.chatGroupFromIndex.id
@@ -102,6 +107,9 @@ export class ChatTabsComponent extends BaseViewComponentDirective implements OnI
                 .then(() => {
                     this.clearTextInput();
                 })
+                .finally(() => {
+                    this.messagePending = false;
+                })
                 .catch(this.raiseError);
         }
     }