feat: throttle pagination

Rule-34 · Jan 26, 2024 · 47660d0 · 47660d0
1 parent fb3b093
commit 47660d0
Showing 1 changed file with 4 additions and 1 deletion.
diff --git a/components/pages/posts/navigation/PostsPagination.vue b/components/pages/posts/navigation/PostsPagination.vue
@@ -1,5 +1,6 @@
 <script setup>
   import { vIntersectionObserver } from '@vueuse/components'
+  import { useThrottleFn } from '@vueuse/core'
 
   const emit = defineEmits(['loadNextPage'])
 
@@ -10,11 +11,13 @@
 
     emit('loadNextPage')
   }
+
+  const throttledOnIntersectionObserver = useThrottleFn(onIntersectionObserver, 350)
 </script>
 
 <template>
   <div
-    v-intersection-observer="[onIntersectionObserver, { rootMargin: '0px 0px 0px 0px', threshold: [1] }]"
+    v-intersection-observer="[throttledOnIntersectionObserver, { rootMargin: '0px 0px 0px 0px', threshold: [1] }]"
     class="flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium text-base-content"
     data-testid="load-next-page"
   >