✨ more details

client/components/contact/ContactCardSkeleton.vue

@@ -3,9 +3,9 @@
  <div class="w-full flex items-center justify-between p-6 space-x-6">
  <div class="flex-1 truncate">
  <div class="flex items-center space-x-3">
- <u-skeleton class="w-32 text-sm leading-5 font-medium h-6" />
+ <u-skeleton class="w-32 text-sm leading-5 font-medium h-5" />
  </div>
- <u-skeleton class="mt-1 w-36 h-6" />
+ <u-skeleton class="mt-1 w-36 h-5" />
  </div>
  <u-skeleton class="w-10 h-10 rounded-full" />
  </div>
@@ -24,7 +24,7 @@
  class="relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm leading-5 text-gray-700 font-medium border border-transparent rounded-br-lg transition ease-in-out duration-150 hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10"
  href="#"
  >
- <u-skeleton class="w-20 h-full" />
+ <u-skeleton class="w-20 h-6" />
  </a>
  </div>
  </div>

client/components/header/HeaderProfile.vue

@@ -38,9 +38,6 @@ const profileGroup = [
  },
  ],
  ]
-
-
-
 </script>
 
 <template>
@@ -50,7 +47,7 @@ const profileGroup = [
  Sign In
  </u-button>
  <u-dropdown v-else :items="profileGroup">
- <u-button variant="ghost" color="white" size="xs">
+ <u-button variant="ghost" color="white" size="xs" :ui="{ rounded: 'rounded-full' }">
  <span class="sr-only">Open user menu</span>
  <img
  v-if="api.$user.avatar" class="w-8 h-8 rounded-full bg-blue-400" :src="api.$user.avatar"

client/pages/index.vue

@@ -2,8 +2,15 @@
 const { setCrumbs } = useCrumbs()
 setCrumbs([{ name: 'List of Users', to: '/', icon: 'i-mdi-account-group' }])
 
+const loading = ref(false)
+
 const users = ref<models.UserResults>(undefined)
-const get = async () => users.value = await useApi().index<models.UserResults>('/example', { count: 9 })
+const get = async () => {
+ loading.value = true
+ users.value = undefined
+ users.value = await useApi().index<models.UserResults>('/example', { count: 9 })
+ loading.value = false
+}
 const error = async () => await useApi().get('/error')
 
 get()
@@ -30,7 +37,7 @@ const test = () => {
  <span>&nbsp;</span>
  <span class="text-sm">(1 second delay)</span>
  <div class="mt-4 flex justify-center space-x-2">
- <u-button @click="get" icon="i-mdi-refresh">
+ <u-button @click="get" :loading="loading" icon="i-mdi-refresh">
  get()
  </u-button>
  <u-button @click="test">toast test </u-button>