fix loading Skeleton

src/modules/01_dashboard/views/Dashboard.vue

@@ -26,8 +26,9 @@ const { showLoader, hideLoader, date2Thai, messageError } = mixin;
 const fullname = ref<string>(""); // ชื่อผู้ใช้
 const inboxList = ref<InboxDetail[]>([]); // รายการกล่องข้อความ
 const idInboxActive = ref<string>(); // Id ข้อความที่เลือก
-// รายการเมนูหลักของระบบ
+const isLoadingInbox = ref<boolean>(true); // สถานะการโหลดกล่องข้อความ
 
+// รายการเมนูหลักของระบบ
 const filteredItems = computed(() => {
   const isOfficer = dataStore.officerType === "OFFICER";
   const conditions: Record<string, boolean> = {
@@ -148,7 +149,10 @@ const items = ref<MenuMainList[]>([
  * @param index หน้าที่โหลดข้อมูล
  */
 const fetchlistInbox = async (index: number) => {
-  index === 1 && showLoader();
+  if (index === 1) {
+    isLoadingInbox.value = true; // เริ่มโหลดข้อมูลกล่องข้อความ
+  }
+
   index != 0 &&
     (await http
       .get(config.API.msgInbox + `?page=${index}&pageSize=${10}`)
@@ -173,7 +177,7 @@ const fetchlistInbox = async (index: number) => {
         }
       })
       .finally(() => {
-        hideLoader();
+        isLoadingInbox.value = false;
       }));
 };
 
@@ -249,11 +253,17 @@ const totalInbox = ref<number>(0); // จำนวนข้อความทั
  */
 async function onLoad(index: number, done: Function) {
   const num = index === 1 ? 0 : index++;
-  if (inboxList.value.length < totalInbox.value) {
-    setTimeout(() => {
-      fetchlistInbox(num);
-      done();
-    }, 3000);
+  try {
+    // ถ้าโหลดครบแล้ว ให้หยุด infinite scroll
+    if (inboxList.value.length >= totalInbox.value) {
+      done(true);
+      return;
+    }
+
+    await fetchlistInbox(num);
+    done();
+  } catch (error) {
+    done(true);
   }
 }
 
@@ -284,7 +294,16 @@ onMounted(async () => {
           v-for="(item, j) in filteredItems"
           :key="j"
         >
-          <q-card bordered @click="goToPage(item.path)" class="noactive col-12">
+          <q-card v-if="dataStore.isLoadingMenu" bordered class="col-12">
+            <q-skeleton width="100%" height="180px" />
+          </q-card>
+
+          <q-card
+            v-else
+            bordered
+            @click="goToPage(item.path)"
+            class="noactive col-12"
+          >
             <div class="col-12">
               <q-avatar
                 :color="item.color"
@@ -323,12 +342,24 @@ onMounted(async () => {
             กล่องข้อความ
           </div>
           <q-space />
-          <div class="text-grey-5" style="font-size: 12px">
+          <div v-if="isLoadingInbox">
+            <q-skeleton type="text" width="80px" />
+          </div>
+          <div v-else class="text-grey-5" style="font-size: 12px">
             ทั้งหมด {{ totalInbox }} ข้อความ
           </div>
         </div>
+
         <div
-          v-if="totalInbox != 0"
+          class="q-pa-sm"
+          v-if="isLoadingInbox"
+          style="height: calc(100% - 60px)"
+        >
+          <q-skeleton height="100%" square />
+        </div>
+
+        <div
+          v-if="totalInbox != 0 && !isLoadingInbox"
           ref="scrollTargetRef"
           style="max-height: 90%; overflow: auto"
         >
@@ -400,7 +431,11 @@ onMounted(async () => {
           </q-infinite-scroll>
         </div>
 
-        <q-banner rounded class="bg-amber-1 text-center q-mx-sm" v-else>
+        <q-banner
+          rounded
+          class="bg-amber-1 text-center q-mx-sm"
+          v-else-if="totalInbox === 0 && !isLoadingInbox"
+        >
           <div class="text-yellow-10">
             <q-icon
               name="mdi-alert-box"