skeleton loader for updates and announcements

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()
 

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">

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',
+                }),
+}