fix: improve UX for image uploads

Image uploads might take a while and even though we can’t currently show
a progress bar for the upload (because fetch upload progress is still
not a thing) we can at least indicate that something is happening and
disable any interactive UI elements.

refs #144

src/components/images/ImageEditor.vue

@@ -5,7 +5,7 @@
     :cover="false"
   />
 
-  <div class="tw-grid tw-gap-x-6 tw-gap-y-3 tw-grid-cols-6 tw-mt-6">
+  <fieldset class="tw-grid tw-gap-x-6 tw-gap-y-3 tw-grid-cols-6 tw-mt-6" v-bind="attrs">
     <div class="form-group tw-col-span-6">
       <label class="control-label">
         {{ t('image.altText') }}
@@ -23,12 +23,12 @@
         <input v-model="image.credits" class="form-control" />
       </label>
     </div>
-  </div>
+  </fieldset>
 </template>
 
 <script lang="ts" setup>
 import { useTextareaAutosize } from '@vueuse/core'
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 import { useI18n } from '@/i18n'
 import { Image, NewImage } from '@/stores/images'
 import { useUpdatableState } from '@/util'
@@ -40,6 +40,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   (e: 'update:modelValue', value: Image | NewImage): void
 }>()
+const attrs = useAttrs()
 const { t } = useI18n()
 const image = useUpdatableState<Image | NewImage>(
   computed(() => props.modelValue),
@@ -52,6 +53,7 @@ const { textarea: descriptionEl } = useTextareaAutosize({ watch: () => image.val
 
 <script lang="ts">
 export default {
+  inheritAttrs: false,
   compatConfig: {
     MODE: 3,
   },

src/components/images/ImagePickerDialog.vue

@@ -35,7 +35,7 @@
     </p>
 
     <ImageBrowser v-if="showBrowser" @input="setImage" />
-    <ImageEditor v-if="selectedImage" v-model="selectedImage" />
+    <ImageEditor v-if="selectedImage" v-model="selectedImage" :disabled="isSaving" />
 
     <template v-if="showBrowser || selectedImage" #footer>
       <div class="tw-flex tw-gap-x-3">
@@ -43,14 +43,16 @@
           v-if="selectedImage"
           :disabled="isSaving"
           type="button"
-          class="btn btn-primary"
+          class="btn btn-primary tw-flex tw-items-center tw-gap-1"
           @click.stop="selectedImage && saveAndSelectImage(selectedImage)"
         >
+          <icon-system-uicons-loader v-if="isSaving" class="tw-animate-spin" />
           <template v-if="isSelectedImageNew">{{ t('imagePicker.useImage') }}</template>
           <template v-else>{{ t('imagePicker.saveChanges') }}</template>
         </button>
         <button
           v-if="selectedImage"
+          :disabled="isSaving"
           type="button"
           class="btn btn-default"
           @click.stop="deselectImage"