fix Load

src/views/HistoryView.vue

@@ -24,6 +24,7 @@ const pageSize = ref<number>(10) // จำนวนแถวต่อหน้
 const total = ref<number>(0) // จำนวนทั้งหมด
 const maxPage = ref<number>(1) // จำนวนวหน้าทั้งหมด
 const filter = ref<string>('') //search data table
+const isLoading = ref<boolean>(false) // ตัวแปรสำหรับเช็คการโหลดข้อมูล
 
 /**
  * ฟังก์ชั่น api เปลี่ยนหน้า
@@ -38,19 +39,15 @@ async function changePage(pageVal: number, pageSizeVal: number, key: string) {
   await functionFetch()
 }
 
-/**
- * ฟังก์ชันสำหรับดึงข้อมูลตามประเภทแท็บที่เลือก
- */
+/** ฟังก์ชันสำหรับดึงข้อมูลตามประเภทแท็บที่เลือก*/
 async function functionFetch() {
   stores.rows = []
   stores.tab === 'history' ? await fetchlistHistory() : await fetchlistTime()
 }
 
-/***
- * ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลา
- */
+/** ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลา*/
 async function fetchlistHistory() {
-  showLoader()
+  isLoading.value = true
   await http
     .get(
       config.API.history() +
@@ -72,7 +69,7 @@ async function fetchlistHistory() {
       messageError($q, err)
     })
     .finally(() => {
-      hideLoader()
+      isLoading.value = false
     })
 }
 
@@ -80,7 +77,7 @@ async function fetchlistHistory() {
  * ฟังก์ชั่นดึงรายการลงเวลากรณีพิเศษ
  */
 async function fetchlistTime() {
-  showLoader()
+  isLoading.value = true
   await http
     .get(
       config.API.historyTime() +
@@ -104,7 +101,7 @@ async function fetchlistTime() {
       messageError($q, err)
     })
     .finally(() => {
-      hideLoader()
+      isLoading.value = false
     })
 }
 
@@ -193,6 +190,7 @@ onMounted(() => {
                 @update:change-page="changePage"
                 :max-page="maxPage"
                 :tab="stores.tab"
+                :is-loading="isLoading"
               />
             </q-tab-panel>
 
@@ -211,6 +209,7 @@ onMounted(() => {
                 @update:change-page="changePage"
                 :max-page="maxPage"
                 :tab="stores.tab"
+                :is-loading="isLoading"
               />
             </q-tab-panel>
           </q-tab-panels>

src/views/HomeView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
-import { useQuasar } from 'quasar'
+import { is, useQuasar } from 'quasar'
 import moment from 'moment'
 import Camera from 'simple-vue-camera'
 
@@ -26,11 +26,13 @@ const isDisabledCheckTime = ref<boolean>(false) // ข้อความแจ
 const isErr = ref<boolean | null>(null) // ข้อความแจ้งเตือน
 const endTimeAfternoon = ref<string>('12:00:00') //เวลาเช็คเอาท์ตามรอบ
 
+const isLoadingCheckTime = ref<boolean>(false) // ตัวแปรสำหรับการโหลด
+
 /**
  * fetch เช็คเวลาต้องลงเวลาเข้าหรือออกงาน
  */
 async function fetchCheckTime(load: any = true) {
-  load && showLoader()
+  if (load) isLoadingCheckTime.value = true
   await http
     .get(config.API.checkTime())
     .then(async (res) => {
@@ -48,7 +50,7 @@ async function fetchCheckTime(load: any = true) {
       } else messageError($q, err)
     })
     .finally(() => {
-      load && hideLoader()
+      if (load) isLoadingCheckTime.value = false
     })
 }
 
@@ -140,12 +142,12 @@ const intervalId = ref<number | undefined>(undefined) // ต้องใช้
  */
 async function startChecking() {
   try {
-    showLoader()
+    // showLoader()
     await fetchCheckStatus()
     await fetchCheckTime()
   } catch (error) {
     console.error('Error in startChecking:', error)
-    hideLoader()
+    // hideLoader()
   }
 }
 
@@ -157,7 +159,6 @@ async function fetchCheckStatus() {
   try {
     const res = await http.get(config.API.checkStatus())
     inQueue.value = res.data.result.inQueue
-
     if (res.data.result.inQueue) {
       /** inQueue เป็น true  */
       isDisabledCheckTime.value = true
@@ -453,7 +454,7 @@ const inQueue = ref<boolean>(false)
 
 /** Hook*/
 onMounted(async () => {
-  // await fetchCheckTime()
+  isLoadingCheckTime.value = true
   updateClock()
   startChecking() //เช็ค status จาก คิว #1
   mapRef.value?.requestLocationPermission()
@@ -471,7 +472,13 @@ onMounted(async () => {
           "
         >
           <!-- <q-header elevated class="bg-purple"> -->
-          <div :class="getClass(statusCheckin)" class="gt-xs">
+          <div
+            class="col-12 q-pa-md items-center gt-xs"
+            v-if="isLoadingCheckTime"
+          >
+            <q-skeleton type="QCard" width="100%" height="50px" />
+          </div>
+          <div v-else :class="getClass(statusCheckin)" class="gt-xs">
             <div class="col">
               <div class="row col-12 justify-center q-py-sm text-subtitle1">
                 <strong v-if="!statusCheckin && inQueue">
@@ -490,6 +497,7 @@ onMounted(async () => {
               </div>
             </div>
           </div>
+
           <div class="col-12 text-grey-9">
             <div class="col-12 row justify-center">
               <div class="col-12 row q-pt-md justify-center gt-xs">
@@ -849,7 +857,24 @@ onMounted(async () => {
 
   <!--  top page sticky  หน้ามือถือ-->
   <q-page-sticky expand position="top" v-if="$q.screen.xs">
-    <div :class="getClassXS(statusCheckin)">
+    <div
+      class="row q-col-gutter-sm col bg-white col-12 q-pa-md"
+      style="height: 100px"
+      v-if="isLoadingCheckTime"
+    >
+      <div class="col-7">
+        <div class="row col-12">
+          <q-skeleton type="text" width="90%" />
+          <q-skeleton type="text" width="50%" class="text-subtitle1" />
+        </div>
+      </div>
+      <div class="col-5">
+        <div class="row col-12">
+          <q-skeleton type="QBtn" width="100%" />
+        </div>
+      </div>
+    </div>
+    <div v-else :class="getClassXS(statusCheckin)">
       <div class="col">
         <div class="row col-12 justify-right items-center text-subtitle1">
           <strong v-if="!statusCheckin && inQueue">