From 686e6a4911dd1a345ed484f71704c8492c492753 Mon Sep 17 00:00:00 2001
From: grimhilt <grimhilt@users.noreply.github.com>
Date: Sat, 6 May 2023 13:30:50 +0200
Subject: [PATCH] set loading of deletions

---
 .../components/structure/message/Composer.vue |  3 ++-
 .../components/structure/message/Options.vue  | 25 +++++++++++++++++--
 front/src/components/utils/SvgLoader.vue      |  2 +-
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/front/src/components/structure/message/Composer.vue b/front/src/components/structure/message/Composer.vue
index 43cea55..4d7e9fb 100644
--- a/front/src/components/structure/message/Composer.vue
+++ b/front/src/components/structure/message/Composer.vue
@@ -281,6 +281,7 @@ function sendMessage() {
     display: flex;
     flex-direction: row;
     padding: 0 10px 10px 10px;
+    min-height: 90px;
     max-height: 500px;
     overflow: auto;
 }
@@ -296,7 +297,7 @@ function sendMessage() {
     border-radius: 10px;
     padding: 0 10px;
     overflow: auto;
-    min-height: 150px;
+    min-height: 80px;
 }
 
 .bubble-menu,
diff --git a/front/src/components/structure/message/Options.vue b/front/src/components/structure/message/Options.vue
index 5e8ea76..74bb8a5 100644
--- a/front/src/components/structure/message/Options.vue
+++ b/front/src/components/structure/message/Options.vue
@@ -14,6 +14,7 @@ const room: any = inject("room");
 
 const seenLoading = ref(false);
 const flaggedLoading = ref(false);
+const deletionLoading = ref(false);
 
 const setReadFlag = () => setFlag("\\Seen", seenLoading);
 const setFlaggedFlag = () => setFlag("\\Flagged", flaggedLoading);
@@ -44,26 +45,34 @@ const setFlag = (flag: string, loadingState: Ref<boolean>) => {
 };
 
 const deleteEverywhere = () => {
+    if (deletionLoading.value) return;
     if (!room?.value || !props.msg) return;
+    deletionLoading.value = true;
     API.deleteEverywhere({ mailboxId: room.value?.mailboxId, messageId: props.msg?.id })
         .then((res) => {
             store.commit("removeMsg", { roomId: room.value?.id, messageId: props.msg?.id });
+            deletionLoading.value = false;
         })
         .catch((err) => {
             console.log(err);
+            deletionLoading.value = false;
         });
 };
 
 const deleteRemoteOnly = () => {
+    if (deletionLoading.value) return;
     if (!room?.value || !props.msg) return;
+    deletionLoading.value = true;
     API.deleteRemoteOnly({ mailboxId: room.value?.mailboxId, messageId: props.msg?.id })
         .then((res) => {
             if (!hasFlag(props.msg?.flags, "\\Deleted")) {
                 store.commit("addFlag", { roomId: room.value?.id, messageId: props.msg?.id, flag: "\\Deleted" });
             }
+            deletionLoading.value = false;
         })
         .catch((err) => {
             console.log(err);
+            deletionLoading.value = false;
         });
 };
 </script>
@@ -98,10 +107,22 @@ const deleteRemoteOnly = () => {
             </span>
             <SvgLoader svg="reply-line" class="option" />
             <span @click="deleteRemoteOnly()">
-                <SvgLoader svg="delete-bin-4-line" class="option" classes="danger" v-tooltip="'Delete from remote'" />
+                <SvgLoader
+                    svg="delete-bin-4-line"
+                    class="option"
+                    :loading="deletionLoading"
+                    classes="danger"
+                    v-tooltip="'Delete from remote'"
+                />
             </span>
             <span @click="deleteEverywhere()">
-                <SvgLoader svg="delete-bin-6-line" class="option" classes="danger" v-tooltip="'Delete everywhere'" />
+                <SvgLoader
+                    svg="delete-bin-6-line"
+                    class="option"
+                    :loading="deletionLoading"
+                    classes="danger"
+                    v-tooltip="'Delete everywhere'"
+                />
             </span>
             <SvgLoader svg="share-forward-line" class="option" />
             <SvgLoader svg="reply-all-line" class="option" />
diff --git a/front/src/components/utils/SvgLoader.vue b/front/src/components/utils/SvgLoader.vue
index 242135d..eb1e715 100644
--- a/front/src/components/utils/SvgLoader.vue
+++ b/front/src/components/utils/SvgLoader.vue
@@ -37,7 +37,7 @@ img {
 }
 
 .lds-dual-ring {
-    display: inline-block;
+    display: flex;
     width: 26px;
     height: 26px;
 }