fix:load skeleton

src/modules/08_KPI/views/mainEvaluator.vue

@@ -93,8 +93,9 @@ const maxPage = ref<number>(1);
  * ดึงข้อมูลรายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
  * @param type
  */
+const isLoadOp = ref<boolean>(false);
 async function fetchRoundOption() {
-  showLoader();
+  isLoadOp.value = true;
   await http
     .get(
       config.API.kpiPeriod +
@@ -120,18 +121,19 @@ async function fetchRoundOption() {
         store.formQuery.round = roundOp.value[0].id;
         await fetchList();
       }
+      isLoadOp.value = false;
     })
     .catch((err) => {
       messageError($q, err);
+      isLoadOp.value = false;
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /** ดึงข้อมูล list */
+const isLoad = ref<boolean>(false)
 async function fetchList() {
-  showLoader();
+  isLoad.value = true
   const body = {
     page: store.formQuery.page,
     pageSize: store.formQuery.pageSize,
@@ -158,13 +160,13 @@ async function fetchList() {
       maxPage.value = Math.ceil(data.total / store.formQuery.pageSize);
       totalList.value = data.total;
       dataListMain.value = data.data;
+      isLoad.value = false
     })
     .catch((err) => {
       messageError($q, err);
+      isLoad.value = false
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /** เลือกรอบการประเมิน */
@@ -221,7 +223,7 @@ onMounted(async () => {
 
       <div class="col-12">
         <q-card bordered class="q-pa-md">
-          <div class="items-center col-12 row q-col-gutter-sm q-mb-sm">
+          <div class="items-center col-12 row q-gutter-sm q-mb-sm">
             <datepicker
               class="col-md-1 col-xs-12"
               v-model="store.yearRound"
@@ -260,6 +262,7 @@ onMounted(async () => {
               </template>
             </datepicker>
             <q-select
+              v-if="!isLoadOp"
               class="col-md-2 col-xs-12"
               v-model="store.formQuery.round"
               outlined
@@ -272,7 +275,12 @@ onMounted(async () => {
               map-options
               @update:model-value="changRound"
             />
-
+            <q-skeleton
+              v-else
+              class="col-md-2 col-xs-12"
+              type="QInput"
+              height="40px"
+            />
             <q-space />
 
             <q-input
@@ -342,6 +350,7 @@ onMounted(async () => {
                     :maxPage="maxPage"
                     :updatePagination="updatePagination"
                     :fetchList="fetchList"
+                    :is-load="isLoad"
                   />
                 </q-tab-panel>
 
@@ -355,6 +364,7 @@ onMounted(async () => {
                     :maxPage="maxPage"
                     :updatePagination="updatePagination"
                     :fetchList="fetchList"
+                    :is-load="isLoad"
                   />
                 </q-tab-panel>
 
@@ -368,6 +378,7 @@ onMounted(async () => {
                     :maxPage="maxPage"
                     :updatePagination="updatePagination"
                     :fetchList="fetchList"
+                    :is-load="isLoad"
                   />
                 </q-tab-panel>
 
@@ -381,6 +392,7 @@ onMounted(async () => {
                     :maxPage="maxPage"
                     :updatePagination="updatePagination"
                     :fetchList="fetchList"
+                    :is-load="isLoad"
                   />
                 </q-tab-panel>
 
@@ -394,6 +406,7 @@ onMounted(async () => {
                     :maxPage="maxPage"
                     :updatePagination="updatePagination"
                     :fetchList="fetchList"
+                    :is-load="isLoad"
                   />
                 </q-tab-panel>
               </q-tab-panels>