From 6d56db384fbefd9ab8fcb9b5ab69021b6308ef71 Mon Sep 17 00:00:00 2001
From: Sin-Kang <jlc488@gmail.com>
Date: Wed, 3 Jun 2026 22:47:55 +0900
Subject: [PATCH] feat: skeleton loading for list tables

Replace the default spinner overlay on the list screens with a
table-shaped skeleton (header strip + placeholder rows) on first load, so
the page hints at its structure instead of flashing an empty area. Matches
the Skeleton already used on the dashboard.

- new reusable <TableSkeleton :columns :rows :label /> (PrimeVue Skeleton)
- shown via v-if="loading && !items.length"; the real table is v-else, so
  background refreshes keep showing data (no skeleton flash on reload)
- applied to Users, Roles, Permissions, Groups, Tenants, Policies,
  Audit Logs (DataTable) and Menus (TreeTable)
- common.loading i18n key (en/ko) for the aria-label

Verification: npm run build (vue-tsc + Vite) green.
---
 src/components/TableSkeleton.vue | 40 ++++++++++++++++++++++++++++++++
 src/i18n/locales/en.ts           |  1 +
 src/i18n/locales/ko.ts           |  1 +
 src/views/AuditLogsView.vue      |  3 +++
 src/views/GroupsView.vue         |  3 +++
 src/views/MenusView.vue          |  4 +++-
 src/views/PermissionsView.vue    |  3 +++
 src/views/PoliciesView.vue       |  3 +++
 src/views/RolesView.vue          |  3 +++
 src/views/TenantsView.vue        |  3 +++
 src/views/UsersView.vue          |  3 +++
 11 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 src/components/TableSkeleton.vue

diff --git a/src/components/TableSkeleton.vue b/src/components/TableSkeleton.vue
new file mode 100644
index 0000000..db5e5f3
--- /dev/null
+++ b/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>
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index d024662..398abf0 100644
--- a/src/i18n/locales/en.ts
+++ b/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',
diff --git a/src/i18n/locales/ko.ts b/src/i18n/locales/ko.ts
index e97ba1d..abb2c44 100644
--- a/src/i18n/locales/ko.ts
+++ b/src/i18n/locales/ko.ts
@@ -157,6 +157,7 @@ export default {
     close: '닫기',
     search: '검색',
     noResults: '결과 없음',
+    loading: '불러오는 중…',
     tenantId: '테넌트 ID',
     code: '코드',
     name: '이름',
diff --git a/src/views/AuditLogsView.vue b/src/views/AuditLogsView.vue
index 63819f0..9cb2695 100644
--- a/src/views/AuditLogsView.vue
+++ b/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
diff --git a/src/views/GroupsView.vue b/src/views/GroupsView.vue
index a8bd538..601297e 100644
--- a/src/views/GroupsView.vue
+++ b/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
diff --git a/src/views/MenusView.vue b/src/views/MenusView.vue
index 30ee7c0..e8f5b1e 100644
--- a/src/views/MenusView.vue
+++ b/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>
diff --git a/src/views/PermissionsView.vue b/src/views/PermissionsView.vue
index 839c5fa..ce50537 100644
--- a/src/views/PermissionsView.vue
+++ b/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
diff --git a/src/views/PoliciesView.vue b/src/views/PoliciesView.vue
index 4f3818d..e2fafc1 100644
--- a/src/views/PoliciesView.vue
+++ b/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
diff --git a/src/views/RolesView.vue b/src/views/RolesView.vue
index 014163b..b545cc1 100644
--- a/src/views/RolesView.vue
+++ b/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
diff --git a/src/views/TenantsView.vue b/src/views/TenantsView.vue
index 0aaa502..800d221 100644
--- a/src/views/TenantsView.vue
+++ b/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
diff --git a/src/views/UsersView.vue b/src/views/UsersView.vue
index 5456b13..61c18fe 100644
--- a/src/views/UsersView.vue
+++ b/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