fix(ui): improve MetricsBadges skeleton alignment (#929)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: wojtekmaj

app/components/Package/MetricsBadges.vue

@@ -7,11 +7,13 @@ const props = defineProps<{
   version?: string
 }>()
 
-const { data: analysis } = usePackageAnalysis(
+const { data: analysis, status } = usePackageAnalysis(
   () => props.packageName,
   () => props.version,
 )
 
+const isLoading = computed(() => status.value !== 'error' && !analysis.value)
+
 // ESM support
 const hasEsm = computed(() => {
   if (!analysis.value) return false
@@ -52,25 +54,33 @@ const typesHref = computed(() => {
 </script>
 
 <template>
-  <ul v-if="analysis" class="flex items-center gap-1.5 list-none m-0 p-0">
+  <ul class="flex items-center gap-1.5 list-none m-0 p-0">
     <!-- TypeScript types badge -->
-    <li v-if="!props.isBinary">
+    <li v-if="!props.isBinary" class="contents">
       <TooltipApp :text="typesTooltip">
         <component
           :is="typesHref ? NuxtLink : 'span'"
           :to="typesHref"
           :tabindex="!typesHref ? 0 : undefined"
-          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200 focus-visible:(outline-2 outline-accent)"
+          class="flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200 focus-visible:(outline-2 outline-accent)"
           :class="[
-            hasTypes
-              ? 'text-fg-muted bg-bg-muted border border-border'
-              : 'text-fg-subtle bg-bg-subtle border border-border-subtle',
+            isLoading
+              ? 'text-fg-subtle bg-bg-subtle border border-border-subtle'
+              : hasTypes
+                ? 'text-fg-muted bg-bg-muted border border-border'
+                : 'text-fg-subtle bg-bg-subtle border border-border-subtle',
             typesHref
               ? 'hover:text-fg hover:border-border-hover focus-visible:outline-accent/70'
               : '',
           ]"
         >
           <span
+            v-if="isLoading"
+            class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
+            aria-hidden="true"
+          />
+          <span
+            v-else
             class="w-3 h-3"
             :class="hasTypes ? 'i-carbon-checkmark' : 'i-carbon-close'"
             aria-hidden="true"
@@ -81,18 +91,28 @@ const typesHref = computed(() => {
     </li>
 
     <!-- ESM badge (show with X if missing) -->
-    <li>
-      <TooltipApp :text="hasEsm ? $t('package.metrics.esm') : $t('package.metrics.no_esm')">
+    <li class="contents">
+      <TooltipApp
+        :text="isLoading ? '' : hasEsm ? $t('package.metrics.esm') : $t('package.metrics.no_esm')"
+      >
         <span
           tabindex="0"
-          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200 focus-visible:(outline-2 outline-accent)"
+          class="flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200 focus-visible:(outline-2 outline-accent)"
           :class="
-            hasEsm
-              ? 'text-fg-muted bg-bg-muted border border-border'
-              : 'text-fg-subtle bg-bg-subtle border border-border-subtle'
+            isLoading
+              ? 'text-fg-subtle bg-bg-subtle border border-border-subtle'
+              : hasEsm
+                ? 'text-fg-muted bg-bg-muted border border-border'
+                : 'text-fg-subtle bg-bg-subtle border border-border-subtle'
           "
         >
           <span
+            v-if="isLoading"
+            class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
+            aria-hidden="true"
+          />
+          <span
+            v-else
             class="w-3 h-3"
             :class="hasEsm ? 'i-carbon-checkmark' : 'i-carbon-close'"
             aria-hidden="true"
@@ -102,14 +122,24 @@ const typesHref = computed(() => {
       </TooltipApp>
     </li>
 
-    <!-- CJS badge (only show if present) -->
-    <li v-if="hasCjs">
-      <TooltipApp :text="$t('package.metrics.cjs')">
+    <!-- CJS badge -->
+    <li v-if="isLoading || hasCjs" class="contents">
+      <TooltipApp :text="isLoading ? '' : $t('package.metrics.cjs')">
         <span
           tabindex="0"
-          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200 focus-visible:(outline-2 outline-accent)"
+          class="flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200 focus-visible:(outline-2 outline-accent)"
+          :class="
+            isLoading
+              ? 'text-fg-subtle bg-bg-subtle border border-border-subtle'
+              : 'text-fg-muted bg-bg-muted border border-border'
+          "
         >
-          <span class="i-carbon-checkmark w-3 h-3" aria-hidden="true" />
+          <span
+            v-if="isLoading"
+            class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
+            aria-hidden="true"
+          />
+          <span v-else class="i-carbon-checkmark w-3 h-3" aria-hidden="true" />
           CJS
         </span>
       </TooltipApp>

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

@@ -585,8 +585,8 @@ defineOgImageComponent('Package', {
           </span>
 
           <!-- Package metrics (module format, types) -->
-          <ClientOnly>
-            <div class="flex gap-2 sm:gap-3 flex-wrap">
+          <div class="flex gap-2 sm:gap-3 flex-wrap">
+            <ClientOnly>
               <PackageMetricsBadges
                 v-if="resolvedVersion"
                 :package-name="pkg.name"
@@ -613,16 +613,18 @@ defineOgImageComponent('Package', {
                 />
                 <span>{{ formatCompactNumber(likesData?.totalLikes ?? 0, { decimals: 1 }) }}</span>
               </button>
-            </div>
-
-            <template #fallback>
-              <div class="flex items-center gap-1.5 self-baseline ms-1 sm:ms-2">
-                <SkeletonBlock class="w-8 h-5 rounded" />
-                <SkeletonBlock class="w-12 h-5 rounded" />
-                <SkeletonBlock class="w-5 h-5 rounded" />
-              </div>
-            </template>
-          </ClientOnly>
+              <template #fallback>
+                <div
+                  class="flex items-center gap-1.5 list-none m-0 p-0 relative top-[5px] self-baseline ms-1 sm:ms-2"
+                >
+                  <SkeletonBlock class="w-16 h-5.5 rounded" />
+                  <SkeletonBlock class="w-13 h-5.5 rounded" />
+                  <SkeletonBlock class="w-13 h-5.5 rounded" />
+                  <SkeletonBlock class="w-13 h-5.5 rounded bg-bg-subtle" />
+                </div>
+              </template>
+            </ClientOnly>
+          </div>
 
           <!-- Internal navigation: Docs + Code + Compare (hidden on mobile, shown in external links instead) -->
           <nav