กล่องข้อความ

src/views/Dashboard.vue

@@ -32,7 +32,9 @@ onMounted(async () => {
   await getData(1);
 });
 
+const isLoadInbox = ref<boolean>(false);
 const getData = async (index: number) => {
+  isLoadInbox.value = false;
   index === 1 && showLoader();
   index != 0 &&
     (await http
@@ -67,6 +69,7 @@ const getData = async (index: number) => {
         messageError($q, e);
       })
       .finally(() => {
+        isLoadInbox.value = true;
         hideLoader();
       }));
 };
@@ -122,10 +125,10 @@ const totalInbox = ref<number>(0);
 function onLoad(index: number, done: any) {
   const num = index === 1 ? 0 : index++;
   if (inboxList.value.length < totalInbox.value) {
-    setTimeout(() => {
-      getData(num);
-      done();
-    }, 1000);
+    // setTimeout(() => {
+    getData(num);
+    done();
+    // }, );
   }
 }
 const thaiOptions: Intl.DateTimeFormatOptions = {
@@ -225,7 +228,10 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
               />
             </q-list>
 
-            <template v-slot:loading v-if="inboxList.length < totalInbox">
+            <template
+              :v-slot:isLoadInbox?loading:null
+              v-if="inboxList.length < totalInbox"
+            >
               <div class="row justify-center q-my-md">
                 <q-spinner-dots color="primary" size="40px" />
               </div>

src/views/MainLayout.vue

@@ -87,7 +87,9 @@ async function fetchmsgNoread() {
     });
 }
 
+const isLoad = ref<boolean>(false);
 const getDataNotification = async (index: number, type: string) => {
+  isLoad.value = false;
   const thaiOptions: Intl.DateTimeFormatOptions = {
     hour: "2-digit",
     minute: "2-digit",
@@ -123,6 +125,7 @@ const getDataNotification = async (index: number, type: string) => {
       messageError($q, e);
     })
     .finally(() => {
+      isLoad.value = true;
       // hideLoader();
     });
 };
@@ -452,8 +455,8 @@ const round = ref<number>(0);
 function onLoad(index: any, done: any) {
   if (notiList.value.length < totalInbox.value) {
     setTimeout(() => {
-      getDataNotification(index + 1, "NOMAL");
       done();
+      getDataNotification(index + 1, "NOMAL");
     }, 1000);
   }
 }
@@ -521,12 +524,16 @@ watch(
           size="13px"
           class="q-mx-md bg-grey-3"
           :color="totalNoti === 0 ? 'grey-6' : 'grey-8'"
-          :disable="totalNoti === 0"
         >
           <q-icon name="mdi-bell" size="18px" color="grey-7" />
-          <q-badge rounded color="negative" text-color="white" floating>{{
-            totalNoti
-          }}</q-badge>
+          <q-badge
+            rounded
+            color="negative"
+            text-color="white"
+            floating
+            v-if="totalNoti !== 0"
+            >{{ totalNoti }}</q-badge
+          >
           <q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
             <div
               class="q-px-md q-py-sm row col-12 items-center"
@@ -577,7 +584,13 @@ watch(
                 </q-item>
                 <q-separator color="grey-2" />
               </q-list>
-              <template v-slot:loading v-if="notiList.length < totalInbox">
+              <template
+                :v-slot:isLoad?
+                loading
+                :
+                null,
+                v-if="notiList.length < totalInbox"
+              >
                 <div class="row justify-center q-my-md">
                   <q-spinner-dots color="primary" size="40px" />
                 </div>