From 4ab0be75e725fc58697fabbfb8493a6066ada956 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Mon, 25 May 2026 21:23:22 +0200
Subject: [PATCH] feat(notes): show loader on image upload button while
 uploading

---
 src/components/StackedNote.vue | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index 94a3efa..40089e7 100644
--- a/src/components/StackedNote.vue
+++ b/src/components/StackedNote.vue
@@ -118,17 +118,23 @@ const { uploadImage } = useImageUpload({
 
 const fileInput = ref<HTMLInputElement | null>(null)
 const editKey = ref(0)
+const isUploading = ref(false)
 
 const onImagePicked = async (e: Event) => {
   const input = e.target as HTMLInputElement
   const file = input.files?.[0]
   input.value = ""
   if (!file || !path.value) return
-  const result = await uploadImage(file)
-  if (!result) return
-  const suffix = rawContent.value.endsWith("\n") ? "" : "\n\n"
-  rawContent.value = `${rawContent.value}${suffix}![](${result.filename})\n`
-  editKey.value++
+  isUploading.value = true
+  try {
+    const result = await uploadImage(file)
+    if (!result) return
+    const suffix = rawContent.value.endsWith("\n") ? "" : "\n\n"
+    rawContent.value = `${rawContent.value}${suffix}![](${result.filename})\n`
+    editKey.value++
+  } finally {
+    isUploading.value = false
+  }
 }
 
 const {
@@ -298,10 +304,16 @@ const onBadgeClick = async () => {
         <button
           v-if="isMarkdown && mode === 'edit'"
           class="action button is-text is-light"
-          title="Upload image"
+          :title="isUploading ? 'Uploading…' : 'Upload image'"
+          :disabled="isUploading"
           @click="fileInput?.click()"
         >
+          <span
+            v-if="isUploading"
+            class="loading loading-spinner loading-sm"
+          ></span>
           <svg
+            v-else
             xmlns="http://www.w3.org/2000/svg"
             class="icon icon-tabler icon-tabler-photo-plus"
             width="24"