feat(album): add progress indicator on save

frontend/src/views/creators/AboutCreator.vue

@@ -14,9 +14,14 @@
       </button>
 
       <!-- Save button -->
-      <button v-if="isEditMode" :disabled="!canSave" :title="t('save')"
+      <button v-if="isEditMode" :disabled="isSaving || !canSave" :title="t('save')"
         class="flex size-12 items-center justify-center rounded-full bg-hutopyPrimary shadow-lg" @click="saveChanges()">
-        <v-icon large>mdi-check</v-icon>
+        <template v-if="isLoading">
+          <v-progress-circular indeterminate size="20" width="2" color="white" />
+        </template>
+        <template v-else>
+          <v-icon>mdi-check</v-icon>
+        </template>
       </button>
 
       <!-- Cancel button -->
@@ -114,6 +119,7 @@ const brandingStore = useBrandingStore();
 const client = useClient();
 
 const isLoading = ref(true);
+const isSaving = ref(false);
 const isLoggedIn = true;
 const isEditMode = ref(false);
 const showEditButtons = ref(false);
@@ -138,6 +144,8 @@ const descriptionError = ref("");
 
 // Computed property to check if we can save
 const canSave = computed(() => {
+  if (isSaving.value == true) { return false; }
+
   // Check if description is empty or only whitespace
   if (!editableDescription.value || editableDescription.value.trim() === '') {
     return false;
@@ -346,16 +354,17 @@ async function saveChanges() {
       // Now add or update photos
       for (let i = 0; i < newImages.length; i++) {
         const imageData = newImages[i];
+        imageData.isUploading = true;
         console.log('Image Data to be uploaded:', imageData);
         // This is a new image that needs to be uploaded
         const photoId = crypto.randomUUID();
-        const formData = new FormData();
 
         // Convert data URL to file
         const response = await fetch(imageData.image.originalUrl);
         const blob = await response.blob();
         const file = new File([blob], imageData.file.name, { type: imageData.file.type });
 
+        const formData = new FormData();
         formData.append('file', file);
 
         await client.post(`/api/albums/${albumId.value}/photos`, formData, {
@@ -366,6 +375,7 @@ async function saveChanges() {
             photoId: photoId
           }
         });
+        imageData.isUploading = false;
 
       }
 
@@ -374,7 +384,6 @@ async function saveChanges() {
     }
 
     isEditMode.value = false;
-
   } catch (error) {
     console.error("Erreur lors de la sauvegarde :", error);
   } finally {