fix(useInfiniteScroll)!: improve loading strategies, close #1701, close

#1685

packages/core/useInfiniteScroll/demo.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import { useInfiniteScroll } from '@vueuse/core'
 
 const el = ref<HTMLElement | null>(null)
-const data = ref([1, 2, 3, 4, 5, 6])
+const data = ref([1])
 
 useInfiniteScroll(
   el,
@@ -17,7 +17,7 @@ useInfiniteScroll(
 
 <template>
   <div ref="el" class="flex flex-col gap-2 p-4 w-300px h-300px m-auto overflow-y-scroll bg-gray-500/5 rounded">
-    <div v-for="item in data" :key="item" class="h-30 bg-gray-500/5 rounded p-3">
+    <div v-for="item in data" :key="item" class="h-15 bg-gray-500/5 rounded p-3">
       {{ item }}
     </div>
   </div>

packages/core/useInfiniteScroll/index.ts

@@ -1,6 +1,6 @@
+import { computed, nextTick, reactive, ref, watch } from 'vue-demi'
 import type { UnwrapNestedRefs } from 'vue-demi'
-import { nextTick, reactive, watch } from 'vue-demi'
-import type { MaybeRefOrGetter } from '@vueuse/shared'
+import type { Awaitable, MaybeRefOrGetter } from '@vueuse/shared'
 import { toValue } from '@vueuse/shared'
 import type { UseScrollOptions } from '../useScroll'
 import { useScroll } from '../useScroll'
@@ -21,11 +21,11 @@ export interface UseInfiniteScrollOptions extends UseScrollOptions {
   direction?: 'top' | 'bottom' | 'left' | 'right'
 
   /**
-   * Whether to preserve the current scroll position when loading more items.
+   * The interval time between two load more (to avoid too many invokes).
    *
-   * @default false
+   * @default 100
    */
-  preserveScrollPosition?: boolean
+  interval?: number
 }
 
 /**
@@ -35,10 +35,14 @@ export interface UseInfiniteScrollOptions extends UseScrollOptions {
  */
 export function useInfiniteScroll(
   element: MaybeRefOrGetter<HTMLElement | SVGElement | Window | Document | null | undefined>,
-  onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => void | Promise<void>,
+  onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => Awaitable<void>,
   options: UseInfiniteScrollOptions = {},
 ) {
-  const direction = options.direction ?? 'bottom'
+  const {
+    direction = 'bottom',
+    interval = 100,
+  } = options
+
   const state = reactive(useScroll(
     element,
     {
@@ -50,27 +54,39 @@ export function useInfiniteScroll(
     },
   ))
 
-  watch(
-    () => state.arrivedState[direction],
-    async (v) => {
-      if (v) {
-        const elem = toValue(element) as Element
-        const previous = {
-          height: elem?.scrollHeight ?? 0,
-          width: elem?.scrollWidth ?? 0,
-        }
+  const promise = ref<any>()
+  const isLoading = computed(() => !!promise.value)
 
-        await onLoadMore(state)
+  function checkAndLoad() {
+    const el = toValue(element) as HTMLElement
+    if (!el)
+      return
 
-        if (options.preserveScrollPosition && elem) {
-          nextTick(() => {
-            elem.scrollTo({
-              top: elem.scrollHeight - previous.height,
-              left: elem.scrollWidth - previous.width,
-            })
+    const isNarrower = (direction === 'bottom' || direction === 'top')
+      ? el.scrollHeight <= el.clientHeight
+      : el.scrollWidth <= el.clientWidth
+
+    if (state.arrivedState[direction] || isNarrower) {
+      if (!promise.value) {
+        promise.value = Promise.all([
+          onLoadMore(state),
+          new Promise(resolve => setTimeout(resolve, interval)),
+        ])
+          .finally(() => {
+            promise.value = null
+            nextTick(() => checkAndLoad())
           })
-        }
       }
-    },
+    }
+  }
+
+  watch(
+    () => [state.arrivedState[direction], toValue(element)],
+    checkAndLoad,
+    { immediate: true },
   )
+
+  return {
+    isLoading,
+  }
 }