From 1e5b648a71c6a77f8d8f39a85eb1d3c8b8a67935 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Fri, 13 Jan 2023 17:00:32 +0100
Subject: [PATCH] fix: remove Firefox icon border when using animate-spin
 (#1081)

---
 components/common/CommonInputImage.vue             | 14 ++++++++------
 .../NotificationEnablePushNotification.client.vue  |  5 ++++-
 .../NotificationPreferences.client.vue             | 12 +++++++++---
 components/publish/PublishWidget.vue               |  8 ++++++--
 components/tiptap/TiptapHashtagList.vue            |  4 +++-
 components/tiptap/TiptapMentionList.vue            |  4 +++-
 components/user/UserSignIn.vue                     |  5 ++++-
 error.vue                                          |  4 +++-
 pages/settings/profile/appearance.vue              |  8 ++++----
 9 files changed, 44 insertions(+), 20 deletions(-)

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>