diff --git a/components/common/CommonInputImage.vue b/components/common/CommonInputImage.vue index 595d5786..4a002ed2 100644 --- a/components/common/CommonInputImage.vue +++ b/components/common/CommonInputImage.vue @@ -88,17 +88,19 @@ watch(file, (image, _, onCleanup) => { w-full h-full > - <div absolute bg="black/50" text-white rounded-full text-xl w12 h12 flex justify-center items-center hover="bg-black/40 text-primary"> - <div i-ri:upload-line /> - </div> + <span absolute bg="black/50" text-white rounded-full text-xl w12 h12 flex justify-center items-center hover="bg-black/40 text-primary"> + <span block i-ri:upload-line /> + </span> - <div + <span v-if="loading" absolute inset-0 bg="black/30" text-white flex justify-center items-center > - <div class="i-ri:loader-4-line animate-spin animate-duration-[2.5s]" text-4xl /> - </div> + <span class="animate-spin animate-duration-[2.5s] preserve-3d"> + <span block i-ri:loader-4-line text-4xl /> + </span> + </span> </label> </template> diff --git a/components/notification/NotificationEnablePushNotification.client.vue b/components/notification/NotificationEnablePushNotification.client.vue index 3b1c654b..2df3248b 100644 --- a/components/notification/NotificationEnablePushNotification.client.vue +++ b/components/notification/NotificationEnablePushNotification.client.vue @@ -66,7 +66,10 @@ const isLegacyAccount = computed(() => !currentUser.value?.vapidKey) :disabled="busy || isLegacyAccount" @click="$emit('subscribe')" > - <span aria-hidden="true" :class="busy && animate ? 'i-ri:loader-2-fill animate-spin' : 'i-ri:check-line'" /> + <span v-if="busy && animate" aria-hidden="true" block animate-spin preserve-3d> + <span block i-ri:loader-2-fill aria-hidden="true" /> + </span> + <span v-else aria-hidden="true" block i-ri:check-line /> <span>{{ $t('settings.notifications.push_notifications.warning.enable_desktop') }}</span> </button> <slot name="error" /> diff --git a/components/notification/NotificationPreferences.client.vue b/components/notification/NotificationPreferences.client.vue index 0cda3c27..77b8f273 100644 --- a/components/notification/NotificationPreferences.client.vue +++ b/components/notification/NotificationPreferences.client.vue @@ -147,7 +147,10 @@ onActivated(() => (busy = false)) :class="busy || !saveEnabled ? 'border-transparent' : null" :disabled="busy || !saveEnabled" > - <span :class="busy && animateSave ? 'i-ri:loader-2-fill animate-spin' : 'i-ri:save-2-fill'" /> + <span v-if="busy && animateSave" aria-hidden="true" block animate-spin preserve-3d> + <span block i-ri:loader-2-fill aria-hidden="true" /> + </span> + <span v-else block aria-hidden="true" i-ri:save-2-fill /> {{ $t('settings.notifications.push_notifications.save_settings') }} </button> <button @@ -157,7 +160,7 @@ onActivated(() => (busy = false)) :disabled="busy || !saveEnabled" @click="undoChanges" > - <span aria-hidden="true" class="i-material-symbols:undo-rounded" /> + <span aria-hidden="true" class="block i-material-symbols:undo-rounded" /> {{ $t('settings.notifications.push_notifications.undo_settings') }} </button> </div> @@ -169,7 +172,10 @@ onActivated(() => (busy = false)) :class="busy ? 'border-transparent' : null" :disabled="busy" > - <span aria-hidden="true" :class="busy && animateRemoveSubscription ? 'i-ri:loader-2-fill animate-spin' : 'i-material-symbols:cancel-rounded'" /> + <span v-if="busy && animateRemoveSubscription" aria-hidden="true" block animate-spin preserve-3d> + <span block i-ri:loader-2-fill aria-hidden="true" /> + </span> + <span v-else block aria-hidden="true" i-material-symbols:cancel-rounded /> {{ $t('settings.notifications.push_notifications.unsubscribe') }} </button> </form> diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue index 02e0e97a..5dfe1c97 100644 --- a/components/publish/PublishWidget.vue +++ b/components/publish/PublishWidget.vue @@ -145,7 +145,9 @@ defineExpose({ </div> <div v-if="isUploading" flex gap-1 items-center text-sm p1 text-primary> - <div i-ri:loader-2-fill animate-spin /> + <div animate-spin preserve-3d> + <div i-ri:loader-2-fill /> + </div> {{ $t('state.uploading') }} </div> <div @@ -274,7 +276,9 @@ defineExpose({ aria-describedby="publish-tooltip" @click="publish" > - <div v-if="isSending" i-ri:loader-2-fill animate-spin /> + <span v-if="isSending" block animate-spin preserve-3d> + <div block i-ri:loader-2-fill /> + </span> <span v-if="draft.editingStatus">{{ $t('action.save_changes') }}</span> <span v-else-if="draft.params.inReplyToId">{{ $t('action.reply') }}</span> <span v-else>{{ !isSending ? $t('action.publish') : $t('state.publishing') }}</span> diff --git a/components/tiptap/TiptapHashtagList.vue b/components/tiptap/TiptapHashtagList.vue index d8c063aa..0aa486aa 100644 --- a/components/tiptap/TiptapHashtagList.vue +++ b/components/tiptap/TiptapHashtagList.vue @@ -46,7 +46,9 @@ defineExpose({ <div v-if="isPending || items.length" relative bg-base text-base shadow border="~ base rounded" text-sm py-2 overflow-x-hidden overflow-y-auto max-h-100> <template v-if="isPending"> <div flex gap-1 items-center p2 animate-pulse> - <div i-ri:loader-2-line animate-spin /> + <div animate-spin preserve-3d> + <div i-ri:loader-2-line /> + </div> <span>Fetching...</span> </div> </template> diff --git a/components/tiptap/TiptapMentionList.vue b/components/tiptap/TiptapMentionList.vue index 08bad3d6..81f0e5c6 100644 --- a/components/tiptap/TiptapMentionList.vue +++ b/components/tiptap/TiptapMentionList.vue @@ -46,7 +46,9 @@ defineExpose({ <div v-if="isPending || items.length" relative bg-base text-base shadow border="~ base rounded" text-sm py-2 overflow-x-hidden overflow-y-auto max-h-100> <template v-if="isPending"> <div flex gap-1 items-center p2 animate-pulse> - <div i-ri:loader-2-line animate-spin /> + <div animate-spin preserve-3d> + <div i-ri:loader-2-line /> + </div> <span>Fetching...</span> </div> </template> diff --git a/components/user/UserSignIn.vue b/components/user/UserSignIn.vue index e74b5fdc..f64cdc7f 100644 --- a/components/user/UserSignIn.vue +++ b/components/user/UserSignIn.vue @@ -208,7 +208,10 @@ onClickOutside($$(input), () => { </span> </div> <button flex="~ row" gap-x-2 items-center btn-solid mt2 :disabled="!server || busy"> - <span aria-hidden="true" inline-block :class="busy ? 'i-ri:loader-2-fill animate animate-spin' : 'i-ri:login-circle-line'" class="rtl-flip" /> + <span v-if="busy" aria-hidden="true" block animate animate-spin preserve-3d class="rtl-flip"> + <span block i-ri:loader-2-fill aria-hidden="true" /> + </span> + <span v-else aria-hidden="true" block i-ri:login-circle-line class="rtl-flip" /> {{ $t('action.sign_in') }} </button> </form> diff --git a/error.vue b/error.vue index 897b1d5b..1e5aa429 100644 --- a/error.vue +++ b/error.vue @@ -47,7 +47,9 @@ const reload = async () => { {{ message }} </div> <button flex items-center gap-2 justify-center btn-solid text-center :disabled="state === 'reloading'"> - <span v-if="state === 'reloading'" i-ri:loader-2-fill animate-spin inline-block /> + <span v-if="state === 'reloading'" block animate-spin preserve-3d> + <span block i-ri:loader-2-fill /> + </span> {{ state === 'reloading' ? 'Reloading' : 'Reload' }} </button> </form> diff --git a/pages/settings/profile/appearance.vue b/pages/settings/profile/appearance.vue index f1636580..60ce26f0 100644 --- a/pages/settings/profile/appearance.vue +++ b/pages/settings/profile/appearance.vue @@ -172,10 +172,10 @@ onReactivated(refreshInfo) flex gap-x-2 items-center :disabled="submitting || !isCanSubmit" > - <div - aria-hidden="true" - :class="submitting ? 'i-ri:loader-2-fill animate animate-spin' : 'i-ri:save-line'" - /> + <span v-if="submitting" aria-hidden="true" block animate-spin preserve-3d> + <span block i-ri:loader-2-fill aria-hidden="true" /> + </span> + <span v-else aria-hidden="true" block i-ri:save-line /> {{ $t('action.save') }} </button> </div>