fix: remove <ClientOnly> from pm tabs - solves flicker

Author: danielroe

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

@@ -820,34 +820,22 @@ defineOgImageComponent('Package', {
             role="tablist"
             aria-label="Package manager"
           >
-            <ClientOnly>
-              <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>
-              <template #fallback>
-                <span
-                  v-for="pm in packageManagers"
-                  :key="pm.id"
-                  class="px-2 py-1 font-mono text-xs rounded"
-                  :class="pm.id === 'npm' ? 'bg-bg-elevated text-fg' : 'text-fg-subtle'"
-                >
-                  {{ pm.label }}
-                </span>
-              </template>
-            </ClientOnly>
+            <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>
         </div>
         <div class="relative group">
@@ -914,34 +902,22 @@ defineOgImageComponent('Package', {
             role="tablist"
             :aria-label="$t('package.install.pm_label')"
           >
-            <ClientOnly>
-              <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>
-              <template #fallback>
-                <span
-                  v-for="pm in packageManagers"
-                  :key="pm.id"
-                  class="px-2 py-1 font-mono text-xs rounded"
-                  :class="pm.id === 'npm' ? 'bg-bg-elevated text-fg' : 'text-fg-subtle'"
-                >
-                  {{ pm.label }}
-                </span>
-              </template>
-            </ClientOnly>
+            <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>
         </div>
         <div class="relative group">