feat: skeleton loading for list tables

src/components/TableSkeleton.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+// Loading placeholder for list tables: shows the shape of a table (a header
+// strip + several rows) while the first page loads, instead of a bare area
+// with a spinner. Pair with `v-if="loading && !items.length"` and put the real
+// table on `v-else`, so background refreshes keep showing data.
+import Skeleton from 'primevue/skeleton'
+
+withDefaults(defineProps<{ columns?: number; rows?: number; label?: string }>(), {
+  columns: 3,
+  rows: 8,
+  label: 'Loading…',
+})
+</script>
+
+<template>
+  <div
+    class="border border-surface-200 dark:border-surface-700 rounded-md overflow-hidden"
+    role="status"
+    aria-busy="true"
+    :aria-label="label"
+  >
+    <div
+      class="flex gap-6 px-4 py-3 border-b border-surface-200 dark:border-surface-700 bg-surface-50 dark:bg-surface-800"
+    >
+      <Skeleton v-for="c in columns" :key="`h-${c}`" height="0.8rem" width="5rem" />
+    </div>
+    <div
+      v-for="r in rows"
+      :key="r"
+      class="flex gap-6 px-4 py-3.5 border-b border-surface-100 dark:border-surface-800 last:border-b-0"
+    >
+      <Skeleton
+        v-for="c in columns"
+        :key="`${r}-${c}`"
+        height="1rem"
+        :width="c === columns ? '3rem' : c === 1 ? '9rem' : '7rem'"
+      />
+    </div>
+  </div>
+</template>

src/i18n/locales/en.ts

@@ -157,6 +157,7 @@ export default {
     close: 'Close',
     search: 'Search',
     noResults: 'No results',
+    loading: 'Loading…',
     tenantId: 'Tenant ID',
     code: 'Code',
     name: 'Name',

src/i18n/locales/ko.ts

@@ -157,6 +157,7 @@ export default {
     close: '닫기',
     search: '검색',
     noResults: '결과 없음',
+    loading: '불러오는 중…',
     tenantId: '테넌트 ID',
     code: '코드',
     name: '이름',

src/views/AuditLogsView.vue

@@ -3,6 +3,7 @@ import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import DataTable, { type DataTablePageEvent, type DataTableRowClickEvent } from 'primevue/datatable'
 import Column from 'primevue/column'
+import TableSkeleton from '@/components/TableSkeleton.vue'
 import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import InputText from 'primevue/inputtext'
@@ -132,7 +133,9 @@ onMounted(reload)
       </div>
     </div>
 
+    <TableSkeleton v-if="loading && !rows.length" :columns="8" :rows="8" :label="t('common.loading')" />
     <DataTable
+      v-else
       :value="rows"
       :loading="loading"
       lazy

src/views/GroupsView.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 import DataTable from 'primevue/datatable'
 import Column from 'primevue/column'
 import EmptyState from '@/components/EmptyState.vue'
+import TableSkeleton from '@/components/TableSkeleton.vue'
 import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import InputText from 'primevue/inputtext'
@@ -199,7 +200,9 @@ onMounted(reload)
       </div>
     </div>
 
+    <TableSkeleton v-if="loading && !filtered.length" :columns="3" :rows="8" :label="t('common.loading')" />
     <DataTable
+      v-else
       :value="filtered"
       :loading="loading"
       striped-rows

src/views/MenusView.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 import TreeTable from 'primevue/treetable'
 import Column from 'primevue/column'
 import EmptyState from '@/components/EmptyState.vue'
+import TableSkeleton from '@/components/TableSkeleton.vue'
 import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import InputText from 'primevue/inputtext'
@@ -181,7 +182,8 @@ onMounted(() => {
       </div>
     </div>
 
-    <TreeTable :value="nodes" :loading="loading" data-key="key" :indent-size="24">
+    <TableSkeleton v-if="loading && !nodes.length" :columns="3" :rows="8" :label="t('common.loading')" />
+    <TreeTable v-else :value="nodes" :loading="loading" data-key="key" :indent-size="24">
       <template #empty>
         <EmptyState :message="t('common.noResults')" />
       </template>

src/views/PermissionsView.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 import DataTable from 'primevue/datatable'
 import Column from 'primevue/column'
 import EmptyState from '@/components/EmptyState.vue'
+import TableSkeleton from '@/components/TableSkeleton.vue'
 import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import InputText from 'primevue/inputtext'
@@ -147,7 +148,9 @@ onMounted(reload)
       </div>
     </div>
 
+    <TableSkeleton v-if="loading && !filtered.length" :columns="3" :rows="8" :label="t('common.loading')" />
     <DataTable
+      v-else
       :value="filtered"
       :loading="loading"
       striped-rows

src/views/PoliciesView.vue

@@ -3,6 +3,7 @@ import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import DataTable from 'primevue/datatable'
 import Column from 'primevue/column'
+import TableSkeleton from '@/components/TableSkeleton.vue'
 import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import InputText from 'primevue/inputtext'
@@ -128,7 +129,9 @@ onMounted(reload)
       {{ t('policies.intro') }}
     </Message>
 
+    <TableSkeleton v-if="loading && !rows.length" :columns="3" :rows="8" :label="t('common.loading')" />
     <DataTable
+      v-else
       :value="rows"
       :loading="loading"
       striped-rows

src/views/RolesView.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 import DataTable from 'primevue/datatable'
 import Column from 'primevue/column'
 import EmptyState from '@/components/EmptyState.vue'
+import TableSkeleton from '@/components/TableSkeleton.vue'
 import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import InputText from 'primevue/inputtext'
@@ -159,7 +160,9 @@ onMounted(reload)
       </div>
     </div>
 
+    <TableSkeleton v-if="loading && !filtered.length" :columns="3" :rows="8" :label="t('common.loading')" />
     <DataTable
+      v-else
       :value="filtered"
       :loading="loading"
       striped-rows

src/views/TenantsView.vue

@@ -3,6 +3,7 @@ import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import DataTable from 'primevue/datatable'
 import Column from 'primevue/column'
+import TableSkeleton from '@/components/TableSkeleton.vue'
 import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import InputText from 'primevue/inputtext'
@@ -138,7 +139,9 @@ onMounted(reload)
       </div>
     </div>
 
+    <TableSkeleton v-if="loading && !rows.length" :columns="5" :rows="8" :label="t('common.loading')" />
     <DataTable
+      v-else
       :value="rows"
       :loading="loading"
       striped-rows

src/views/UsersView.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 import DataTable from 'primevue/datatable'
 import Column from 'primevue/column'
 import EmptyState from '@/components/EmptyState.vue'
+import TableSkeleton from '@/components/TableSkeleton.vue'
 import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import InputText from 'primevue/inputtext'
@@ -239,7 +240,9 @@ onMounted(reload)
       </div>
     </div>
 
+    <TableSkeleton v-if="loading && !filtered.length" :columns="6" :rows="8" :label="t('common.loading')" />
     <DataTable
+      v-else
       :value="filtered"
       :loading="loading"
       striped-rows