loading when click read or unread

front/src/components/structure/message/Options.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps, inject, PropType } from "vue";
+import { defineProps, inject, PropType, ref } from "vue";
 import { Message } from "@/store/models/model";
 import API from "@/services/imapAPI";
 import store from "@/store/store";
@@ -11,9 +11,11 @@ const props = defineProps({
 });
 
 const room: any = inject("room");
+const readLoading = ref(false);
 
 const setFlag = (flag: string) => {
-    // todo loading
+    if (readLoading.value) return;
+    readLoading.value = true;
     if (!room?.value || !props.msg) return;
     let apiCall = isSeenFc(props.msg?.flags) ? API.removeFlag : API.addFlag;
     apiCall({
@@ -27,17 +29,32 @@ const setFlag = (flag: string) => {
             } else {
                 store.commit("addFlag", { roomId: room.value?.id, messageId: props.msg?.id, flag: flag });
             }
+            readLoading.value = false;
         })
         .catch((err) => {
             console.log(err);
+            readLoading.value = false;
         });
 };
 </script>
 <template>
     <div id="main">
-        <div class="button" @click="setFlag('\\Seen')">
-            {{ isSeenFc(props.msg?.flags) ? "Mark as not read" : "Mark as read" }}
-        </div>
+        <span @click="setFlag('\\Seen')">
+            <SvgLoader
+                v-if="isSeenFc(props.msg?.flags)"
+                svg="mail-check-line"
+                class="option"
+                v-tooltip="'Mark unread'"
+                :loading="readLoading"
+            />
+            <SvgLoader
+                v-if="!isSeenFc(props.msg?.flags)"
+                svg="mail-unread-line"
+                class="option"
+                v-tooltip="'Mark as read'"
+                :loading="readLoading"
+            />
+        </span>
         <div>flag favorite</div>
         <div>reply</div>
         <div>delete from all</div>
@@ -46,19 +63,17 @@ const setFlag = (flag: string) => {
         <div>see source</div>
         <div>{{ props.msg?.flags }}</div>
         <div class="icons">
-            <SvgLoader svg="flag-line" />
-            <SvgLoader svg="reply-line" />
-            <SvgLoader svg="delete-bin-4-line" />
-            <SvgLoader svg="delete-bin-6-line" />
-            <SvgLoader svg="share-forward-line" />
-            <SvgLoader svg="reply-all-line" />
-            <SvgLoader svg="mail-check-line" />
-            <SvgLoader svg="mail-unread-line" />
+            <SvgLoader svg="flag-line" class="option" />
+            <SvgLoader svg="reply-line" class="option" />
+            <SvgLoader svg="delete-bin-4-line" class="option" classes="danger" v-tooltip="'Delete from server'" />
+            <SvgLoader svg="delete-bin-6-line" class="option" classes="danger" v-tooltip="'Delete everywhere'" />
+            <SvgLoader svg="share-forward-line" class="option" />
+            <SvgLoader svg="reply-all-line" class="option" />
         </div>
     </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 #main {
     text-align: center;
 }
@@ -75,9 +90,19 @@ const setFlag = (flag: string) => {
     display: initial;
     padding: 1px 5px;
     cursor: pointer;
+
+    &:hover {
+        background-color: var(--selected);
+    }
 }
 
-.button:hover {
-    background-color: var(--selected);
+.option {
+    border-radius: 6px;
+    cursor: pointer;
+
+    &:hover,
+    &.is-active {
+        background-color: var(--selected);
+    }
 }
 </style>