From bedd81159c112e54cd4f8fc32db980e257aed335 Mon Sep 17 00:00:00 2001
From: MiniDigger | Martin <admin@benndorf.dev>
Date: Sun, 18 Aug 2024 16:19:14 +0200
Subject: [PATCH] chore: add skeleton to versions page

---
 frontend/src/pages/[user]/[project]/versions/index.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/[user]/[project]/versions/index.vue b/frontend/src/pages/[user]/[project]/versions/index.vue
index c290427f4..1a11b0571 100644
--- a/frontend/src/pages/[user]/[project]/versions/index.vue
+++ b/frontend/src/pages/[user]/[project]/versions/index.vue
@@ -42,7 +42,7 @@ if (!route.query.channel) {
 if (!route.query.platform) {
   filter.platforms.push(...platforms.value.map((p) => p.enumName));
 }
-const { versions } = useProjectVersions(
+const { versions, versionsStatus } = useProjectVersions(
   () => ({
     project: route.params.project,
     data: { ...requestParams.value, includeHiddenChannels: filter.channels?.length > 0 },
@@ -92,9 +92,10 @@ function getVisibilityTitle(visibility: Visibility) {
   <div ref="pageChangeScrollAnchor" class="flex flex-wrap md:flex-nowrap gap-4">
     <section class="basis-full md:basis-11/15 flex-grow">
       <ul>
-        <Alert v-if="!versions || !versions.result || versions.result.length === 0" type="info"> {{ i18n.t("version.page.noVersions") }} </Alert>
+        <Skeleton v-if="versionsStatus === 'loading'" class="h-100" />
+        <Alert v-else-if="!versions?.result?.length" type="info"> {{ i18n.t("version.page.noVersions") }} </Alert>
         <Pagination
-          v-else-if="versions"
+          v-else
           ref="pagination"
           :items="versions.result"
           :server-pagination="versions.pagination"