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

src/views/MainLayout.vue

@@ -58,7 +58,7 @@ const fetchlistNotification = async (index: number, type: string) => {
       const data = res.data.result.data;
       totalInbox.value = res.data.result.total;
       let list: any[] = [];
-      if (type === "DEL" || index === 1) {
+      if (type === "DEL") {
         notiList.value = [];
       }
       data.map((e: any) => {
@@ -122,11 +122,16 @@ const clickDelete = async (id: string, index: number) => {
 const totalInbox = ref<number>(0);
 const page = ref<number>(0);
 async function onLoad(index: any, done: any) {
-  page.value++;
-  setTimeout(async () => {
-    await fetchlistNotification(page.value, "NOMAL");
-    done();
-  }, 1500);
+  if (
+    notiList.value.length < totalInbox.value ||
+    (notiList.value.length === 0 && totalInbox.value === 0)
+  ) {
+    page.value++;
+    setTimeout(async () => {
+      await fetchlistNotification(page.value, "NOMAL");
+      done();
+    }, 1500);
+  }
 }
 
 watch(
@@ -292,7 +297,13 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
                 </q-item>
               </div>
 
-              <template v-slot:loading>
+              <template
+                v-slot:loading
+                v-if="
+                  notiList.length < totalInbox ||
+                  (notiList.length === 0 && totalInbox === 0)
+                "
+              >
                 <div class="text-center q-my-md">
                   <q-spinner-dots color="primary" size="40px" />
                 </div>