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

src/views/pages/WarehouseItems/ListWarehouseItems.vue

@@ -16,7 +16,8 @@ const totalCount = ref(0);
 const page = ref(Number(route.query.page) || 1);
 const perPage = ref(Number(route.query.per_page) || 20);
 const searchPhrase = ref(route.query.search || '');
-const loading = ref(false);
+const loading = ref(true);
+
 
 // Create/Edit dialog
 const showDialog = ref(false);
@@ -217,14 +218,22 @@ const viewStock = (itemId) => {
                     </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-inbox empty-icon"></i>
                         <p>هیچ قلمی یافت نشد</p>
                         <Button label="افزودن اولین قلم" icon="pi pi-plus" @click="openCreateDialog" />
                     </div>
                 </template>
 
+
                 <Column field="code" header="کد" style="width:8%">
                     <template #body="{ data }">
                         <span class="code-badge" v-if="data.code">{{ data.code }}</span>