set loading of deletions

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,

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" />

front/src/components/utils/SvgLoader.vue

@@ -37,7 +37,7 @@ img {
 }
 
 .lds-dual-ring {
-    display: inline-block;
+    display: flex;
     width: 26px;
     height: 26px;
 }