fix(package-readme): avoid premature empty state and add loading/error handling

Author: akadotsh

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

@@ -1040,6 +1040,16 @@ const showSkeleton = shallowRef(false)
 
           <!-- eslint-disable vue/no-v-html -- HTML is sanitized server-side -->
           <Readme v-if="readmeData?.html" :html="readmeData.html" />
+          <p
+            v-else-if="readmeStatus === 'pending'"
+            class="flex items-center gap-2 text-fg-subtle italic"
+          >
+            <span class="i-svg-spinners:ring-resize w-4 h-4" aria-hidden="true" />
+            <span>{{ $t('common.loading') }}…</span>
+          </p>
+          <p v-else-if="readmeStatus === 'error'" class="text-fg-muted italic">
+            {{ $t('package.readme.error_loading') }}
+          </p>
           <p
             v-else-if="readmeStatus === 'success' && !readmeData?.html"
             class="text-fg-muted italic"

i18n/locales/ar.json

@@ -259,7 +259,8 @@
         "warning": "تحذير",
         "caution": "تنبيه"
       },
-      "copy_as_markdown": "نسخ README كـ Markdown"
+      "copy_as_markdown": "نسخ README كـ Markdown",
+      "error_loading": "فشل تحميل تفاصيل ملف README"
     },
     "provenance_section": {
       "title": "إثبات المصدر",

i18n/locales/az-AZ.json

@@ -324,7 +324,8 @@
         "warning": "Xəbərdarlıq",
         "caution": "Diqqət"
       },
-      "copy_as_markdown": "README-ni Markdown olaraq kopyala"
+      "copy_as_markdown": "README-ni Markdown olaraq kopyala",
+      "error_loading": "README təfərrüatları yüklənə bilmədi"
     },
     "provenance_section": {
       "title": "Mənşə",

i18n/locales/bg-BG.json

@@ -287,7 +287,8 @@
         "warning": "Предупреждение",
         "caution": "Внимание"
       },
-      "copy_as_markdown": "Копиране на README като Markdown"
+      "copy_as_markdown": "Копиране на README като Markdown",
+      "error_loading": "Неуспешно зареждане на детайлите за README"
     },
     "provenance_section": {
       "title": "Произход",

i18n/locales/bn-IN.json

@@ -207,7 +207,8 @@
     "readme": {
       "title": "রিডমি",
       "no_readme": "README উপলব্ধ নেই।",
-      "callout": {}
+      "callout": {},
+      "error_loading": "README বিবরণ লোড করা যায়নি"
     },
     "provenance_section": {},
     "security_downgrade": {},

i18n/locales/cs-CZ.json

@@ -480,7 +480,8 @@
         "warning": "Varování",
         "caution": "Upozornění"
       },
-      "copy_as_markdown": "Zkopírovat ČTI MĚ jako Markdown"
+      "copy_as_markdown": "Zkopírovat ČTI MĚ jako Markdown",
+      "error_loading": "Nepodařilo se načíst podrobnosti README"
     },
     "provenance_section": {
       "title": "Původ",

i18n/locales/de.json

@@ -363,7 +363,8 @@
         "warning": "Warnung",
         "caution": "Vorsicht"
       },
-      "copy_as_markdown": "README als Markdown kopieren"
+      "copy_as_markdown": "README als Markdown kopieren",
+      "error_loading": "Fehler beim Laden der README-Details"
     },
     "provenance_section": {
       "title": "Herkunftsnachweis",

i18n/locales/en.json

@@ -480,7 +480,8 @@
         "warning": "Warning",
         "caution": "Caution"
       },
-      "copy_as_markdown": "Copy README as Markdown"
+      "copy_as_markdown": "Copy README as Markdown",
+      "error_loading": "Failed to load README details"
     },
     "provenance_section": {
       "title": "Provenance",

i18n/locales/es-419.json

@@ -47,7 +47,8 @@
   },
   "package": {
     "readme": {
-      "title": "Léame"
+      "title": "Léame",
+      "error_loading": "Error al cargar los detalles del README"
     },
     "access": {
       "grant_button": "otorgar",

i18n/locales/es.json

@@ -364,7 +364,8 @@
         "warning": "Advertencia",
         "caution": "Precaución"
       },
-      "copy_as_markdown": "Copiar README como Markdown"
+      "copy_as_markdown": "Copiar README como Markdown",
+      "error_loading": "Error al cargar los detalles del README"
     },
     "provenance_section": {
       "title": "Procedencia",