Tweaking the UI a bit with loading animations

dbrepo-metadata-service/entities/src/main/java/at/tuwien/entities/database/Database.java

@@ -33,7 +33,7 @@ import java.util.UUID;
         @UniqueConstraint(columnNames = {"cid", "internalName"})
 })
 @NamedQueries({
-        @NamedQuery(name = "Database.findAll", query = "select d from Database d order by d.created desc"),
+        @NamedQuery(name = "Database.findAllDesc", query = "select d from Database d order by d.created desc"),
         @NamedQuery(name = "Database.findByInternalName", query = "select d from Database d where d.internalName = ?1"),
         @NamedQuery(name = "Database.findAllOnlyIds", query = "select d.id from Database d order by d.created desc"),
         @NamedQuery(name = "Database.findReadAccess", query = "select distinct d from Database d join DatabaseAccess a on a.hdbid = d.id and a.huserid = ?1"),

dbrepo-metadata-service/repositories/src/main/java/at/tuwien/repository/mdb/DatabaseRepository.java

@@ -11,6 +11,8 @@ import java.util.UUID;
 @Repository
 public interface DatabaseRepository extends JpaRepository<Database, Long> {
 
+    List<Database> findAllDesc();
+
     List<Database> findReadAccess(UUID id);
 
     List<Database> findWriteAccess(UUID id);

dbrepo-metadata-service/services/src/main/java/at/tuwien/service/impl/MariaDbServiceImpl.java

@@ -76,7 +76,7 @@ public class MariaDbServiceImpl extends HibernateConnector implements DatabaseSe
 
     @Override
     public List<Database> findAll() {
-        return databaseRepository.findAll();
+        return databaseRepository.findAllDesc();
     }
 
     @Override

dbrepo-ui/components/database/DatabaseCard.vue

@@ -24,6 +24,7 @@
           v-if="!database.is_public"
           size="small"
           :color="colorVariant"
+          variant="outlined"
           :text="$t('toolbars.database.private')"
           flat />
         <v-chip
@@ -76,7 +77,13 @@ export default {
   },
   computed: {
     colorVariant () {
-      return this.$vuetify.theme.global.name.toLowerCase().endsWith('contrast') ? '' : 'secondary'
+      return this.isContrastTheme ? '' : (this.isDarkTheme ? 'tertiary' : 'secondary')
+    },
+    isContrastTheme () {
+      return this.$vuetify.theme.global.name.toLowerCase().endsWith('contrast')
+    },
+    isDarkTheme () {
+      return this.$vuetify.theme.global.name.toLowerCase().startsWith('dark')
     }
   },
   methods: {

dbrepo-ui/components/database/DatabaseList.vue

@@ -2,7 +2,7 @@
   <div>
     <div
       v-if="loading"
-      v-for="(idx) in [1,2,3]"
+      v-for="(idx) in [1,2,3,4,5]"
       :key="`d-${idx}`">
       <DatabaseSkeleton />
     </div>

dbrepo-ui/components/database/DatabaseSkeleton.vue

 <template>
-  <v-card variant="flat">
+  <v-card
+    variant="flat"
+    rounded="0">
     <v-divider class="mx-4" />
-    <v-card-subtitle class="db-subtitle">
-      <v-skeleton-loader type="text" :style="randomWidth(100,300)" />
-      <v-skeleton-loader type="text" class="pt-2" :style="randomWidth(100,200)" />
-    </v-card-subtitle>
-    <v-card-text class="db-description">
-      <v-skeleton-loader type="chip" />
-      <v-skeleton-loader type="text" class="pt-4" :style="randomWidth(800,1000)" />
-      <v-skeleton-loader type="text" :style="randomWidth(800,1000)" />
-      <v-skeleton-loader type="text" :style="randomWidth(600,1000)" />
-    </v-card-text>
+    <v-skeleton-loader
+      type="subtitle"
+      :style="randomWidth(300,500)" />
+    <v-skeleton-loader
+      type="list-item-two-line"
+      :style="randomWidth(500,800)" />
   </v-card>
 </template>
 

dbrepo-ui/components/database/DatabaseToolbar.vue

 <template>
-  <div v-if="database">
-    <v-toolbar flat>
+  <div>
+    <v-toolbar
+      flat>
       <v-toolbar-title>
-        <span v-if="$vuetify.display.lgAndUp" v-text="database.name" />
-        <v-tooltip bottom>
+        <span
+          v-if="database && $vuetify.display.lgAndUp"
+          v-text="database.name" />
+        <v-tooltip
+          v-if="database"
+          bottom>
           <template v-slot:activator="{ props }">
             <v-icon
               class="ml-2"
               size="small"
               right
-              :color="database.is_public ? 'success' : null"
+              :color="database.is_public ? 'success' : 'chip'"
               v-bind="props">
               {{ database.is_public ? 'mdi-lock-open-outline' : 'mdi-lock-outline' }}
             </v-icon>

dbrepo-ui/composables/identifier-service.ts

@@ -167,12 +167,15 @@ export const useIdentifierService = (): any => {
     }
     const filtered = data.descriptions.filter(d => d.language && d.language === 'en')
     if (filtered.length === 0) {
-      return data.descriptions[0].description
+      return data.descriptions[0]?.description
     }
     return filtered[0].description
   }
 
-  function descriptionShort(description: string): string {
+  function descriptionShort(description: string): string | null {
+    if (!description) {
+      return null
+    }
     const targetLength = 280
     const lengthMax = 300
     if (description.length <= lengthMax) {

dbrepo-ui/pages/database/[database_id]/info.vue

@@ -2,7 +2,6 @@
   <div>
     <DatabaseToolbar />
     <v-window
-      v-if="database"
       v-model="tab">
       <v-window-item value="1">
         <Summary
@@ -18,12 +17,14 @@
               :identifier="identifier" />
           </v-card-text>
         </v-card>
-        <v-divider v-if="hasIdentifier" />
+        <v-divider
+          v-if="hasIdentifier" />
         <v-card
           :title="$t('pages.database.title')"
           variant="flat"
           rounded="0">
-          <v-card-text>
+          <v-card-text
+            v-if="database">
             <v-list
               lines="two"
               dense>
@@ -114,7 +115,8 @@
           :title="$t('pages.container.title')"
           variant="flat"
           rounded="0">
-          <v-card-text>
+          <v-card-text
+            v-if="database">
             <v-list dense>
               <v-list-item
                 :title="$t('pages.container.name.title')"

dbrepo-ui/pages/index.vue

@@ -38,7 +38,7 @@ export default {
   },
   data () {
     return {
-      loading: false,
+      loading: true,
       dialog: null,
       databases: [],
       userStore: useUserStore()
@@ -56,10 +56,12 @@ export default {
     }
   },
   mounted () {
+    this.loading = true
     const databaseService = useDatabaseService();
     databaseService.findAll()
       .then((databases) => {
         this.databases = databases
+        this.loading = false
       })
   },
   methods: {