#128 - add submitting state

src/components/comments/Comments.vue

@@ -86,15 +86,22 @@
     >
       <label class="sr-only" for="comment">Votre commentaire</label>
       <textarea
+        v-model="draftComment.text"
+        :disabled="isSubmitting ? true : undefined"
         name="comment"
         id="comment"
         placeholder="Ajouter un commentaire…"
         rows="5"
         class="text-sm | rounded-lg bg-black p-12"
-        v-model="draftComment.text"
       ></textarea>
       <footer class="flex">
-        <input type="submit" class="btn btn--tranparent" />
+        <input
+          type="submit"
+          class="btn btn--tranparent"
+          :class="{ submitting: isSubmitting }"
+          :value="isSubmitting ? 'En cours' : undefined"
+          :disabled="isSubmitting ? true : undefined"
+        />
         <button class="btn btn--white-10" @click="isAddOpen = false">
           Annuler
         </button>
@@ -128,6 +135,7 @@ const api = useApiStore();
 const isAddOpen = ref(false);
 const route = useRoute();
 const waitingForCommentPosition = ref(false);
+const isSubmitting = ref(false);
 
 const sortedComments = computed(() => {
   return [...comments.value].reverse();
@@ -219,7 +227,9 @@ async function addComment(newComment) {
     /projects\/.*?(?=\/[^/]+\/[^/]+$)/
   );
   newComment.fileParentUri = matchFileParentUri ? matchFileParentUri[0] : null;
+  isSubmitting.value = true;
   const newFile = await api.addComment(newComment);
+  isSubmitting.value = false;
   resetDraftComment();
   isAddOpen.value = false;
   if (!newFile) return;