loading when click read or unread

front/src/components/utils/SvgLoader.vue

@@ -4,21 +4,57 @@ import { defineProps } from "vue";
 const props = defineProps({
     svg: { type: String, required: true },
     isDisabled: Boolean,
+    classes: String,
+    loading: { type: Boolean, default: false },
 });
 
+console.log(props.loading);
 const pathSvg = () => require(`@/assets/svg/${props.svg}.svg`);
-console.log(props.isDisabled);
 </script>
 
 <template>
-    <div>
-        <img :disabled="props.isDisabled" :src="pathSvg()" />
+    <div class="mainSvg">
+        <div class="lds-dual-ring" v-if="loading"></div>
+        <img v-if="!loading" :disabled="props.isDisabled" :src="pathSvg()" :class="props.classes" />
     </div>
 </template>
 
 <style scoped>
+.mainSvg {
+    max-height: 26px;
+}
+
 img {
     filter: var(--svg-primary-text);
     padding: 1px;
 }
+
+img.danger {
+    filter: var(--svg-danger);
+}
+
+.lds-dual-ring {
+    display: inline-block;
+    width: 26px;
+    height: 26px;
+}
+.lds-dual-ring:after {
+    content: " ";
+    display: block;
+    width: 18px;
+    height: 18px;
+    margin: auto;
+    border-radius: 50%;
+    border: 2px solid #fff;
+    border-color: #fff transparent #fff transparent;
+    animation: lds-dual-ring 1.4s linear infinite;
+}
+@keyframes lds-dual-ring {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
 </style>