fix(package): package manager tab hydration mismatch

Author: MatteoGabriele

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

@@ -911,29 +911,41 @@ defineOgImageComponent('Package', {
               />
             </a>
           </h2>
-          <!-- Package manager tabs -->
-          <div
-            class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md overflow-x-auto"
-            role="tablist"
-            :aria-label="$t('package.get_started.pm_label')"
-          >
-            <button
-              v-for="pm in packageManagers"
-              :key="pm.id"
-              role="tab"
-              :aria-selected="selectedPM === pm.id"
-              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
-              :class="
-                selectedPM === pm.id
-                  ? 'bg-bg shadow text-fg border-border'
-                  : 'text-fg-subtle hover:text-fg border-transparent'
-              "
-              @click="selectedPM = pm.id"
+          <ClientOnly>
+            <!-- Package manager tabs -->
+            <div
+              class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md overflow-x-auto"
+              role="tablist"
+              :aria-label="$t('package.get_started.pm_label')"
             >
-              <span class="inline-block h-3 w-3" :class="pm.icon" aria-hidden="true" />
-              {{ pm.label }}
-            </button>
-          </div>
+              <button
+                v-for="pm in packageManagers"
+                :key="pm.id"
+                role="tab"
+                :aria-selected="selectedPM === pm.id"
+                class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
+                :class="
+                  selectedPM === pm.id
+                    ? 'bg-bg shadow text-fg border-border'
+                    : 'text-fg-subtle hover:text-fg border-transparent'
+                "
+                @click="selectedPM = pm.id"
+              >
+                <span class="inline-block h-3 w-3" :class="pm.icon" aria-hidden="true" />
+                {{ pm.label }}
+              </button>
+            </div>
+
+            <template #fallback>
+              <div
+                class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md overflow-x-auto"
+                aria-busy="true"
+                :aria-label="$t('package.skeleton.loading')"
+              >
+                <div v-for="pm in packageManagers" :key="pm.id" class="skeleton w-16 h-8" />
+              </div>
+            </template>
+          </ClientOnly>
         </div>
         <div class="relative group">
           <!-- Terminal-style install command -->