feat: add profile list loading indicator

refs #219

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>