fix(web): infinite trigger at bottom of infinite scroll

web/components/Notifications/List.vue

@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import {
+import { CheckIcon } from '@heroicons/vue/24/solid';
-  getNotifications,
+import { useQuery } from '@vue/apollo-composable';
-  NOTIFICATION_FRAGMENT,
+import { vInfiniteScroll } from '@vueuse/components';
-} from "./graphql/notification.query";
+import { useFragment } from '~/composables/gql/fragment-masking';
-import type { Importance, NotificationType } from "~/composables/gql/graphql";
+import type { Importance, NotificationType } from '~/composables/gql/graphql';
-import { useFragment } from "~/composables/gql/fragment-masking";
+import { getNotifications, NOTIFICATION_FRAGMENT } from './graphql/notification.query';
-import { useQuery } from "@vue/apollo-composable";
-import { vInfiniteScroll } from "@vueuse/components";
-import { CheckIcon } from "@heroicons/vue/24/solid";
 
 /**
  * Page size is the max amount of items fetched from the api in a single request.
@@ -24,6 +21,7 @@ const props = withDefaults(
   }
 );
 
+const canLoadMore = ref(true);
 const { result, error, fetchMore } = useQuery(getNotifications, () => ({
   filter: {
     offset: 0,
@@ -34,23 +32,20 @@ const { result, error, fetchMore } = useQuery(getNotifications, () => ({
 }));
 
 watch(error, (newVal) => {
-  console.log("[getNotifications] error:", newVal);
+  console.log('[getNotifications] error:', newVal);
 });
 
 const notifications = computed(() => {
   if (!result.value?.notifications.list) return [];
-  const list = useFragment(
+  const list = useFragment(NOTIFICATION_FRAGMENT, result.value?.notifications.list);
-    NOTIFICATION_FRAGMENT,
-    result.value?.notifications.list
-  );
   // necessary because some items in this list may change their type (e.g. archival)
   // and we don't want to display them in the wrong list client-side.
   return list.filter((n) => n.type === props.type);
 });
 
 async function onLoadMore() {
-  console.log("[getNotifications] onLoadMore");
+  console.log('[getNotifications] onLoadMore');
-  void fetchMore({
+  const a = await fetchMore({
     variables: {
       filter: {
         offset: notifications.value.length,
@@ -60,23 +55,22 @@ async function onLoadMore() {
       },
     },
   });
+  const incomingCount = a?.data.notifications.list.length ?? 0;
+  if (incomingCount === 0) {
+    canLoadMore.value = false;
+  }
 }
 </script>
 
 <template>
-  <div
+  <div v-if="notifications?.length === 0" class="h-full flex flex-col items-center justify-center gap-3">
-    v-if="notifications?.length === 0"
-    class="h-full flex flex-col items-center justify-center gap-3"
-  >
     <CheckIcon class="h-10 text-green-600" />
-    {{
+    {{ `No ${props.importance?.toLowerCase() ?? ''} notifications to see here!` }}
-      `No ${props.importance?.toLowerCase() ?? ""} notifications to see here!`
-    }}
   </div>
   <!-- The horizontal padding here adjusts for the scrollbar offset -->
   <div
     v-if="notifications?.length > 0"
-    v-infinite-scroll="onLoadMore"
+    v-infinite-scroll="[onLoadMore, { canLoadMore: () => canLoadMore }]"
     class="divide-y divide-gray-200 overflow-y-auto pl-7 pr-4 h-full"
   >
     <NotificationsItem