From 4ea4d440005dca0fce590190956a01e7aadec4c6 Mon Sep 17 00:00:00 2001
From: Konrad Mohrfeldt <km@roko.li>
Date: Thu, 30 May 2024 14:56:07 +0200
Subject: [PATCH] feat: add profile list loading indicator
refs #219
---
src/Pages/ProfileList.vue | 12 +++++++++++-
1 file changed, 11 insertions(+), 1 deletion(-)
diff --git a/src/Pages/ProfileList.vue b/src/Pages/ProfileList.vue
index 44b22470..d94a529f 100644
--- a/src/Pages/ProfileList.vue
+++ b/src/Pages/ProfileList.vue
@@ -2,6 +2,15 @@
<PageHeader :title="t('profileList.title')" />
<div class="tw-flex tw-gap-6 tw-justify-end tw-items-center tw-mb-6">
+ <span v-if="isLoading" role="alert" aria-live="polite">
+ <span class="tw-flex tw-gap-2 tw-items-center">
+ <Loading class="tw-h-1" />
+ {{ t('loadingData', { items: t('profile.plural') }) }}
+ </span>
+ </span>
+
+ <span class="tw-mr-auto" />
+
<FormGroup class="tw-m-0">
<template #iconLeft="attrs">
<icon-system-uicons-search v-bind="attrs" />
@@ -80,6 +89,7 @@ import { useI18n } from '@/i18n'
import AColorBadge from '@/components/generic/AColorBadge.vue'
import Image from '@/components/generic/Image.vue'
import FormGroup from '@/components/generic/FormGroup.vue'
+import Loading from '@/components/generic/Loading.vue'
const { t } = useI18n()
const hostStore = useHostStore()
@@ -91,7 +101,7 @@ const query = useQuery(() => ({
}))
const page = ref(1)
const profilesPerPage = useStorage('aura:profileList:profilesPerPage', 12)
-const { result } = usePaginatedList(hostStore.listIsolated, page, profilesPerPage, {
+const { result, isLoading } = usePaginatedList(hostStore.listIsolated, page, profilesPerPage, {
query,
})
</script>
--
GitLab