From 3eb59464895142db4c21fcdcc9e8c6a61666a7fc Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 29 Jul 2025 11:54:44 +0700
Subject: [PATCH] =?UTF-8?q?fix=20skeleton=20=3D=3D>=20=20=E0=B8=82?=
 =?UTF-8?q?=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=95=E0=B8=B3?=
 =?UTF-8?q?=E0=B9=81=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dialogs/PopupPersonalNew.vue       |  8 ++++++--
 src/modules/21_report/components/CardPosition.vue | 12 +++++++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/Dialogs/PopupPersonalNew.vue b/src/components/Dialogs/PopupPersonalNew.vue
index 73808d6d0..4ef7825b6 100644
--- a/src/components/Dialogs/PopupPersonalNew.vue
+++ b/src/components/Dialogs/PopupPersonalNew.vue
@@ -505,9 +505,13 @@ watch(modal, (newValue) => {
 
                   <div v-if="isLoading" class="row q-pa-sm">
                     <div
-                      v-for="n in 8"
+                      v-for="n in 9"
                       :key="n"
-                      class="col-xs-6 col-md-6 q-pa-sm"
+                      :class="
+                        n !== 1
+                          ? 'col-xs-6 col-md-6 q-pa-sm'
+                          : 'col-xs-12 col-md-12 q-pa-sm'
+                      "
                     >
                       <q-skeleton type="QInput" height="40px" />
                     </div>
diff --git a/src/modules/21_report/components/CardPosition.vue b/src/modules/21_report/components/CardPosition.vue
index 956639272..3c7b12214 100644
--- a/src/modules/21_report/components/CardPosition.vue
+++ b/src/modules/21_report/components/CardPosition.vue
@@ -35,9 +35,11 @@ const cardData = ref<DataCardPos[]>([
     data: [],
   },
 ]);
+const isLoading = ref(true);
 
 async function fetchDataTenure() {
   if (props?.id) {
+    isLoading.value = true;
     await http
       .get(
         config.API.salaryTenurePosition(
@@ -73,6 +75,9 @@ async function fetchDataTenure() {
       })
       .catch((err) => {
         messageError($q, err);
+      })
+      .finally(() => {
+        isLoading.value = false;
       });
   }
 }
@@ -88,7 +93,12 @@ onMounted(() => {
       <q-icon name="mdi-account-tie" color="grey-7" />
       <span class="q-ml-md">ข้อมูลตำแหน่ง </span>
     </div>
-    <div class="row q-pa-sm">
+    <div v-if="isLoading" class="row q-pa-sm">
+      <q-skeleton class="col-12 q-mt-sm" height="140px" square />
+      <q-skeleton class="col-12 q-mt-sm" height="140px" square />
+      <q-skeleton class="col-12 q-mt-sm" height="140px" square />
+    </div>
+    <div v-else class="row q-pa-sm">
       <q-list flat bordered class="col-12" style="border-radius: 5px">
         <q-card flat v-for="(item, index) in cardData" :key="index">
           <q-item>