Fix hydration missmatch error

Author: Tobbe

app/pages/compare.vue

@@ -198,7 +198,10 @@ useSeoMeta({
         </h2>
 
         <div
-          v-if="status === 'pending' && (!packagesData || packagesData.every(p => p === null))"
+          v-if="
+            (status === 'pending' || status === 'idle') &&
+            (!packagesData || packagesData.every(p => p === null))
+          "
           class="flex items-center justify-center py-12"
         >
           <LoadingSpinner :text="$t('compare.packages.loading')" />
@@ -247,9 +250,12 @@ useSeoMeta({
           <CompareLineChart :packages="packages.filter(p => p !== NO_DEPENDENCY_ID)" />
         </div>
 
-        <div v-else class="text-center py-12" role="alert">
+        <div v-else-if="status === 'error'" class="text-center py-12" role="alert">
           <p class="text-fg-muted">{{ $t('compare.packages.error') }}</p>
         </div>
+        <div v-else class="flex items-center justify-center py-12">
+          <LoadingSpinner :text="$t('compare.packages.loading')" />
+        </div>
       </section>
 
       <!-- Empty state -->