refactor: replace spinner

Author: essenmitsosse

app/components/Compare/FacetCard.vue

@@ -112,7 +112,7 @@ function getShortName(header: string): string {
           <!-- Loading state -->
           <template v-if="isCellLoading(index)">
             <span
-              class="i-carbon:circle-dash w-4 h-4 text-fg-subtle motion-safe:animate-spin"
+              class="i-svg-spinners:ring-resize w-4 h-4 text-fg-subtle motion-safe:animate-spin"
               aria-hidden="true"
             />
           </template>

app/components/Compare/FacetRow.vue

@@ -115,7 +115,7 @@ function isCellLoading(index: number): boolean {
       <!-- Loading state -->
       <template v-if="isCellLoading(index)">
         <span
-          class="i-carbon:circle-dash w-4 h-4 text-fg-subtle motion-safe:animate-spin"
+          class="i-svg-spinners:ring-resize w-4 h-4 text-fg-subtle motion-safe:animate-spin"
           aria-hidden="true"
         />
       </template>

app/components/Header/AccountMenu.client.vue

@@ -231,7 +231,7 @@ function openAuthModal() {
               <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
                 <span
                   v-if="isNpmConnecting"
-                  class="i-carbon:circle-dash w-4 h-4 text-yellow-500 animate-spin"
+                  class="i-i-svg-spinners:ring-resize w-4 h-4 text-yellow-500 animate-spin"
                   aria-hidden="true"
                 />
                 <span v-else class="i-carbon:terminal w-4 h-4 text-fg-muted" aria-hidden="true" />

app/components/Package/MetricsBadges.vue

@@ -73,7 +73,7 @@ const typesHref = computed(() => {
           :tabindex="0"
           :classicon="
             isLoading
-              ? 'i-carbon:circle-dash motion-safe:animate-spin'
+              ? 'i-i-svg-spinners:ring-resize motion-safe:animate-spin'
               : hasTypes
                 ? 'i-carbon:checkmark'
                 : 'i-lucide:circle-x'
@@ -95,7 +95,7 @@ const typesHref = computed(() => {
           :variant="hasEsm && !isLoading ? 'default' : 'ghost'"
           :classicon="
             isLoading
-              ? 'i-carbon:circle-dash motion-safe:animate-spin'
+              ? 'i-i-svg-spinners:ring-resize motion-safe:animate-spin'
               : hasEsm
                 ? 'i-carbon:checkmark'
                 : 'i-lucide:circle-x'
@@ -113,7 +113,9 @@ const typesHref = computed(() => {
           tabindex="0"
           :variant="isLoading ? 'ghost' : 'default'"
           :classicon="
-            isLoading ? 'i-carbon:circle-dash motion-safe:animate-spin' : 'i-carbon:checkmark'
+            isLoading
+              ? 'i-i-svg-spinners:ring-resize motion-safe:animate-spin'
+              : 'i-carbon:checkmark'
           "
         >
           CJS

app/pages/package/[[org]]/[name].vue

@@ -824,7 +824,7 @@ const showSkeleton = shallowRef(false)
               >
                 <span
                   v-if="isLoadingLikeData"
-                  class="i-carbon:circle-dash w-3 h-3 motion-safe:animate-spin my-0.5"
+                  class="i-i-svg-spinners:ring-resize w-3 h-3 motion-safe:animate-spin my-0.5"
                   aria-hidden="true"
                 />
                 <span v-else>
@@ -963,7 +963,7 @@ const showSkeleton = shallowRef(false)
                       class="inline-flex items-center gap-1 text-fg-subtle"
                     >
                       <span
-                        class="i-carbon:circle-dash w-3 h-3 motion-safe:animate-spin"
+                        class="i-i-svg-spinners:ring-resize w-3 h-3 motion-safe:animate-spin"
                         aria-hidden="true"
                       />
                     </span>
@@ -1031,7 +1031,7 @@ const showSkeleton = shallowRef(false)
                   class="inline-flex items-center gap-1 text-fg-subtle"
                 >
                   <span
-                    class="i-carbon:circle-dash w-3 h-3 motion-safe:animate-spin"
+                    class="i-i-svg-spinners:ring-resize w-3 h-3 motion-safe:animate-spin"
                     aria-hidden="true"
                   />
                 </span>
@@ -1054,7 +1054,7 @@ const showSkeleton = shallowRef(false)
                 class="inline-flex items-center gap-1 text-fg-subtle"
               >
                 <span
-                  class="i-carbon:circle-dash w-3 h-3 motion-safe:animate-spin"
+                  class="i-i-svg-spinners:ring-resize w-3 h-3 motion-safe:animate-spin"
                   aria-hidden="true"
                 />
               </span>
@@ -1321,7 +1321,7 @@ const showSkeleton = shallowRef(false)
             class="mt-8 flex items-center gap-2 text-fg-subtle text-sm"
           >
             <span
-              class="i-carbon:circle-dash w-4 h-4 motion-safe:animate-spin"
+              class="i-i-svg-spinners:ring-resize w-4 h-4 motion-safe:animate-spin"
               aria-hidden="true"
             />
             <span>{{ $t('package.provenance_section.title') }}…</span>