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

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>