From a7e69a486f2016e4b49163a4549b769c27015b5d Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Fri, 30 May 2025 11:03:22 +0800
Subject: [PATCH] skeleton loader for updates and announcements

---
 next-ui/src/pages/server/announcements.vue | 23 +++++++++++++---------
 next-ui/src/pages/server/updates.vue       | 23 +++++++++++++---------
 next-ui/src/utils/common-messages.ts       | 14 +++++++++++++
 3 files changed, 42 insertions(+), 18 deletions(-)
 create mode 100644 next-ui/src/utils/common-messages.ts

diff --git a/next-ui/src/pages/server/announcements.vue b/next-ui/src/pages/server/announcements.vue
index 70280e6e..d1b9a035 100644
--- a/next-ui/src/pages/server/announcements.vue
+++ b/next-ui/src/pages/server/announcements.vue
@@ -1,13 +1,17 @@
 <template>
-  <v-alert
-    v-if="error"
-    type="error"
-    variant="tonal"
-  >
-    Error loading data
-  </v-alert>
+  <v-skeleton-loader
+    v-if="isLoading"
+    type="article, paragraph"
+  />
 
-  <template v-if="announcements">
+  <v-empty-state
+    v-else-if="error"
+    icon="mdi-connection"
+    :title="$formatMessage(commonMessages.somethingWentWrongTitle)"
+    :text="$formatMessage(commonMessages.somethingWentWrongSubTitle)"
+  />
+
+  <template v-else-if="announcements">
     <div
       v-for="(item, index) in announcements.items"
       :key="index"
@@ -96,8 +100,9 @@
 <script lang="ts" setup>
 import {useAnnouncements} from '@/colada/queries/announcements.ts'
 import {useMarkAnnouncementsRead} from '@/colada/mutations/mark-announcements-read.ts'
+import {commonMessages} from '@/utils/common-messages.ts'
 
-const {data: announcements, error, unreadCount} = useAnnouncements()
+const {data: announcements, error, unreadCount, isLoading} = useAnnouncements()
 
 const {mutate: markAnnouncementsRead} = useMarkAnnouncementsRead()
 
diff --git a/next-ui/src/pages/server/updates.vue b/next-ui/src/pages/server/updates.vue
index f98befc5..16f0c620 100644
--- a/next-ui/src/pages/server/updates.vue
+++ b/next-ui/src/pages/server/updates.vue
@@ -1,13 +1,17 @@
 <template>
-  <v-alert
-    v-if="error"
-    type="error"
-    variant="tonal"
-  >
-    Error loading data
-  </v-alert>
+  <v-skeleton-loader
+    v-if="isLoading"
+    type="article, paragraph"
+  />
 
-  <template v-if="releases">
+  <v-empty-state
+    v-else-if="error"
+    icon="mdi-connection"
+    :title="$formatMessage(commonMessages.somethingWentWrongTitle)"
+    :text="$formatMessage(commonMessages.somethingWentWrongSubTitle)"
+  />
+
+  <template v-else-if="releases">
     <v-row>
       <v-col>
         <div v-if="isLatestVersion == true">
@@ -116,8 +120,9 @@
 <script lang="ts" setup>
 import {useAppReleases} from '@/colada/queries/app-releases.ts'
 import {marked} from 'marked'
+import {commonMessages} from '@/utils/common-messages.ts'
 
-const {data: releases, error, buildVersion: currentVersion, isLatestVersion, latestRelease: latest} = useAppReleases()
+const {data: releases, error, buildVersion: currentVersion, isLatestVersion, latestRelease: latest, isLoading} = useAppReleases()
 </script>
 
 <style lang="scss">
diff --git a/next-ui/src/utils/common-messages.ts b/next-ui/src/utils/common-messages.ts
new file mode 100644
index 00000000..1538eddb
--- /dev/null
+++ b/next-ui/src/utils/common-messages.ts
@@ -0,0 +1,14 @@
+import {defineMessage} from 'vue-intl'
+
+export const commonMessages = {
+  somethingWentWrongTitle: defineMessage({
+                  description: 'Common message: an error happened while loading data',
+                  defaultMessage: 'Something went wrong',
+                  id: 'ixQlWv',
+                }),
+  somethingWentWrongSubTitle: defineMessage({
+                  description: 'Common message: an error happened while loading data, explanation',
+                  defaultMessage: 'There might be a problem with your connection or your server.',
+                  id: 'hYO2n6',
+                }),
+}