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

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>