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

src/views/pages/Property/ListProperties.vue

@@ -124,7 +124,10 @@ const onPageChange = (event) => {
     }
 };
 
+const dataLoading = ref(true);
+
 const loadData = async () => {
+    dataLoading.value = true;
     try {
         if (searchMethod.value === null) {
             await loadSearchSetting();
@@ -141,10 +144,13 @@ const loadData = async () => {
     } catch (error) {
         toast.add({ severity: 'error', summary: 'خطا', detail: 'خطا در بازیابی اطلاعات املاک', life: 3000 });
         console.error('Error loading data:', error);
+    } finally {
+        dataLoading.value = false;
     }
 };
 
 
+
 const loading = ref(false);
 const indexingFinished = ref(false);
 const indexingMessage = ref('در حال ایندکس...');
@@ -322,6 +328,7 @@ const onCardHover = (propertyId) => {
                     ref="dt"
                     v-model:selection="selectedProperties"
                     :value="properties"
+                    :loading="dataLoading"
                     dataKey="_id"
                     :paginator="true"
                     :rows="per_page"
@@ -335,12 +342,25 @@ const onCardHover = (propertyId) => {
                     stripedRows
                     responsiveLayout="scroll"
                 >
+                    <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 gap-2 items-center justify-between">
                             <h4 class="m-0 text-lg font-bold">لیست املاک ({{ totalCount }} مورد)</h4>
                         </div>
                     </template>
 
+
                     <Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
                     <Column header="تصویر" style="width: 5rem">
                         <template #body="slotProps">
@@ -423,8 +443,25 @@ const onCardHover = (propertyId) => {
                         </span>
                     </div>
 
+                    <!-- Loading Skeleton in Split View -->
+                    <div v-if="dataLoading" class="cards-grid">
+                        <div
+                            v-for="i in 6"
+                            :key="i"
+                            class="p-4 rounded-2xl border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 shadow-sm flex flex-col gap-3 animate-pulse"
+                        >
+                            <Skeleton width="100%" height="11rem" class="rounded-xl" />
+                            <Skeleton width="70%" height="1.25rem" class="rounded-md" />
+                            <Skeleton width="45%" height="1rem" class="rounded-md" />
+                            <div class="flex justify-between items-center pt-2 border-t border-surface-100 dark:border-surface-800">
+                                <Skeleton width="35%" height="1rem" class="rounded-md" />
+                                <Skeleton width="2rem" height="2rem" class="rounded-lg" />
+                            </div>
+                        </div>
+                    </div>
+
                     <!-- Cards Grid -->
-                    <div v-if="properties.length > 0" class="cards-grid">
+                    <div v-else-if="properties.length > 0" class="cards-grid">
                         <div
                             v-for="prop in properties"
                             :key="prop._id || prop.id"
@@ -505,9 +542,11 @@ const onCardHover = (propertyId) => {
                     </div>
 
                     <div v-else class="p-8 text-center text-slate-500">
-                        ملکی یافت نشد.
+                        <i class="pi pi-inbox text-4xl mb-2 text-surface-400"></i>
+                        <p>ملکی یافت نشد.</p>
                     </div>
 
+
                     <!-- Pagination -->
                     <Paginator
                         :rows="per_page"