fix: remove Firefox icon border when using animate-spin (#1081)

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">
+    <span 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 />
+      <span block i-ri:upload-line />
-    </div>
+    </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 />
+      <span class="animate-spin animate-duration-[2.5s] preserve-3d">
-    </div>
+        <span block i-ri:loader-4-line text-4xl />
+      </span>
+    </span>
   </label>
 </template>

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" />

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>

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>

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>

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>

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>

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>

pages/settings/profile/appearance.vue

@@ -172,10 +172,10 @@ onReactivated(refreshInfo)
             flex gap-x-2 items-center
             :disabled="submitting || !isCanSubmit"
           >
-            <div
+            <span v-if="submitting" aria-hidden="true" block animate-spin preserve-3d>
-              aria-hidden="true"
+              <span block i-ri:loader-2-fill aria-hidden="true" />
-              :class="submitting ? 'i-ri:loader-2-fill animate animate-spin' : 'i-ri:save-line'"
+            </span>
-            />
+            <span v-else aria-hidden="true" block i-ri:save-line />
             {{ $t('action.save') }}
           </button>
         </div>