ดักการโหลด การแจ้งเตือน

src/views/MainLayout.vue

@@ -454,11 +454,16 @@ const round = ref<number>(0);
 const page = ref<number>(0);
 
 function onLoad(index: any, done: any) {
-  page.value++;
-  setTimeout(() => {
-    done();
-    getDataNotification(page.value, "NOMAL");
-  }, 1500);
+  if (
+    notiList.value.length < totalInbox.value ||
+    (notiList.value.length === 0 && totalInbox.value === 0)
+  ) {
+    page.value++;
+    setTimeout(() => {
+      done();
+      getDataNotification(page.value, "NOMAL");
+    }, 1500);
+  }
 }
 
 watch(
@@ -545,10 +550,16 @@ watch(
             </div>
 
             <q-infinite-scroll @load="onLoad" :offset="250">
-              <div v-for="(n, index) in notiList" :key="index" class="caption q-pa-xs">
+              <div
+                v-for="(n, index) in notiList"
+                :key="index"
+                class="caption q-pa-xs"
+              >
                 <q-item
                   v-ripple
-                  :class="!n.isOpen ? 'mytry q-py-xs my-menu-link' : 'mytry q-py-xs'"
+                  :class="
+                    !n.isOpen ? 'mytry q-py-xs my-menu-link' : 'mytry q-py-xs'
+                  "
                   dense
                 >
                   <q-item-section avatar top style="min-width: 40px">
@@ -581,7 +592,13 @@ watch(
 
               <q-separator color="grey-2" />
 
-              <template v-slot:loading>
+              <template
+                v-slot:loading
+                v-if="
+                  notiList.length < totalInbox ||
+                  (notiList.length === 0 && totalInbox === 0)
+                "
+              >
                 <div class="row justify-center q-my-md">
                   <q-spinner-dots color="primary" size="40px" />
                 </div>