fix skeleton ==> ข้อมูลตำแหน่ง

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>

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>