feat: add loading screens, skeleton states, and table loaders across all list pages

src/views/pages/Roles/ListRoles.vue

@@ -11,8 +11,9 @@ const confirm = useConfirm();
 
 const roles = ref([]);
 const allPermissions = ref([]);
-const loading = ref(false);
+const loading = ref(true);
 const showDialog = ref(false);
+
 const editMode = ref(false);
 const submitting = ref(false);
 const selectedRole = ref(null);
@@ -253,14 +254,22 @@ const confirmDelete = (r, event) => {
                     </div>
                 </template>
 
+                <template #loading>
+                    <div class="flex flex-col items-center justify-center p-8 gap-3">
+                        <ProgressSpinner style="width: 42px; height: 42px" strokeWidth="4" />
+                        <span class="text-sm font-medium text-surface-500">در حال بارگذاری نقش‌ها و دسترسی‌ها...</span>
+                    </div>
+                </template>
+
                 <template #empty>
-                    <div class="empty-state">
+                    <div v-if="!loading" class="empty-state">
                         <i class="pi pi-shield empty-icon"></i>
                         <p>هیچ نقشی تعریف نشده است</p>
                         <Button label="افزودن اولین نقش" icon="pi pi-plus" @click="openCreate" />
                     </div>
                 </template>
 
+
                 <!-- Native Name -->
                 <Column field="nativeName" header="نام فارسی نقش" style="min-width: 180px">
                     <template #body="{ data }">