feat: Add creator profile and about section improvements

frontend/src/views/creators/CreatorLogoEditor.vue

@@ -58,13 +58,20 @@
 
     <div class="card-actions">
       <button class="secondary"
-              @click="cancel">
+              @click="cancel"
+              :disabled="isUploading">
         {{ t('cancel') }}
       </button>
       <button class="primary"
               @click="showCropper ? applyCrop() : publish()"
-              :disabled="!selectedFile">
-        {{ showCropper ? t('apply') : t('save') }}
+              :disabled="!selectedFile || isUploading">
+        <template v-if="isUploading">
+          <span class="loading-spinner"></span>
+          {{ t('uploading') }} ({{ uploadProgress }}%)
+        </template>
+        <template v-else>
+          {{ showCropper ? t('apply') : t('save') }}
+        </template>
       </button>
     </div>
   </div>
@@ -92,6 +99,8 @@ const fallbackUrl = '/images/usersmedia/HutopyProfile/profilepictures/profileHut
 const errorMessage = ref('')
 const showCropper = ref(false)
 const cropper = ref(null)
+const isUploading = ref(false)
+const uploadProgress = ref(0)
 
 const TARGET_WIDTH = 200
 const TARGET_HEIGHT = 200
@@ -153,15 +162,22 @@ const applyCrop = () => {
 
 const client = useClient()
 const publish = async () => {
-  if (!selectedFile.value) return
+  if (!selectedFile.value || isUploading.value) return
 
   try {
+    isUploading.value = true
+    uploadProgress.value = 0
     const formData = new FormData()
     formData.append('file', selectedFile.value)
 
     const response = await client.post(
         `/api/creators/${props.creator.id}/logo`,
-        formData
+        formData,
+        {
+          onUploadProgress: (progressEvent) => {
+            uploadProgress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+          }
+        }
     )
 
     props.creator.images.logo = `${response.data.blobUrl}?t=${Date.now()}`
@@ -169,6 +185,9 @@ const publish = async () => {
   } catch (error) {
     console.error(error)
     errorMessage.value = t('errors.imageUpload')
+  } finally {
+    isUploading.value = false
+    uploadProgress.value = 0
   }
 }
 
@@ -289,6 +308,27 @@ const cancel = () => {
 :deep(.cropper__stencil) {
   @apply rounded-full;
 }
+
+.loading-spinner {
+  @apply inline-block;
+  @apply w-4;
+  @apply h-4;
+  @apply mr-2;
+  @apply border-2;
+  @apply border-white;
+  @apply border-t-transparent;
+  @apply rounded-full;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>
 
 <i18n>
@@ -297,19 +337,22 @@ const cancel = () => {
     "logoTitle": "Edit Logo",
     "logoDescription": "Choose a logo image for your creator page. The image will be cropped to a circle.",
     "chooseImage": "Choose Image",
-    "clickToEdit": "Click to edit"
+    "clickToEdit": "Click to edit",
+    "uploading": "Uploading"
   },
   "fr": {
     "logoTitle": "Modifier le logo",
     "logoDescription": "Choisissez une image de logo pour votre page de créateur. L'image sera recadrée en cercle.",
     "chooseImage": "Choisir une image",
-    "clickToEdit": "Cliquez pour modifier"
+    "clickToEdit": "Cliquez pour modifier",
+    "uploading": "Téléchargement"
   },
   "es": {
     "logoTitle": "Editar logo",
     "logoDescription": "Elige una imagen de logo para tu página de creador. La imagen se recortará en círculo.",
     "chooseImage": "Elegir imagen",
-    "clickToEdit": "Haz clic para editar"
+    "clickToEdit": "Haz clic para editar",
+    "uploading": "Subiendo"
   }
 }
 </i18n>