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

src/views/pages/Transaction/ListTransactions.vue

@@ -121,7 +121,10 @@ const onPageChange = (event) => {
     }
 };
 
+const dataLoading = ref(true);
+
 const loadData = async () => {
+    dataLoading.value = true;
     try {
         if (searchMethod.value === null) {
             await loadSearchSetting();
@@ -138,10 +141,13 @@ const loadData = async () => {
     } catch (error) {
         toast.add({ severity: 'error', summary: 'Error', detail: 'خطا در دریافت اطلاعات', life: 3000 });
         console.error('Error loading data:', error);
+    } finally {
+        dataLoading.value = false;
     }
 };
 
 
+
 const loading = ref(false);
 const indexingFinished = ref(false);
 const indexingMessage = ref('در حال ایندکس...');
@@ -277,6 +283,7 @@ const toggle = (event, data) => {
                 ref="dt"
                 v-model:selection="selectedTransactions"
                 :value="transactions"
+                :loading="dataLoading"
                 dataKey="id"
                 :paginator="true"
                 :rows="per_page"
@@ -292,6 +299,19 @@ const toggle = (event, data) => {
                 filterDisplay="menu"
                 :globalFilterFields="['type', 'status', 'belongingName', 'createdAt', 'description']"
             >
+                <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 v-if="!dataLoading" class="p-8 text-center text-surface-500">
+                        <i class="pi pi-inbox text-4xl mb-2 text-surface-400"></i>
+                        <p>هیچ تراکنشی یافت نشد.</p>
+                    </div>
+                </template>
+
                 <template #header>
                     <div class="flex flex-wrap items-center justify-between gap-3">
                         <div class="flex items-center gap-3">