fix(useInfiniteScroll): make canLoadMore reactive (#5110)

nhquyss · web-flow · commit 3dc2d83186aa · 2025-10-26T06:28:44.000Z
diff --git a/packages/core/useInfiniteScroll/index.test.ts b/packages/core/useInfiniteScroll/index.test.ts
@@ -56,6 +56,74 @@ describe('useInfiniteScroll', () => {
     expect(mockHandler).toHaveBeenCalledTimes(1)
   })
 
+  it('should not call loadMore when canLoadMore returns false', async () => {
+    const mockHandler = vi.fn()
+    const mockElement = givenMockElement()
+    givenElementVisibilityRefMock(true)
+
+    useInfiniteScroll(mockElement, mockHandler, {
+      canLoadMore: () => false,
+    })
+
+    expect(mockHandler).not.toHaveBeenCalled()
+  })
+
+  it('should call loadMore when canLoadMore returns true', async () => {
+    const mockHandler = vi.fn()
+    const mockElement = givenMockElement()
+    givenElementVisibilityRefMock(true)
+
+    useInfiniteScroll(mockElement, mockHandler, {
+      canLoadMore: () => true,
+    })
+
+    expect(mockHandler).toHaveBeenCalledTimes(1)
+  })
+
+  it('should stop calling loadMore when canLoadMore changes from true to false', async () => {
+    const mockHandler = vi.fn()
+    const mockElement = givenMockElement()
+    givenElementVisibilityRefMock(true)
+
+    const canLoad = deepRef(true)
+    const canLoadMoreSpy = vi.fn(() => canLoad.value)
+    useInfiniteScroll(mockElement, mockHandler, {
+      canLoadMore: canLoadMoreSpy,
+    })
+
+    await flushPromises()
+    expect(mockHandler).toHaveBeenCalledTimes(1)
+
+    canLoad.value = false
+
+    mockElement.dispatchEvent(new Event('scroll'))
+    await flushPromises()
+
+    expect(mockHandler).toHaveBeenCalledTimes(1)
+  })
+
+  it('should call loadMore when canLoadMore changes from false to true', async () => {
+    const mockHandler = vi.fn()
+    const mockElement = givenMockElement()
+    givenElementVisibilityRefMock(true)
+
+    const canLoad = deepRef(false)
+    const canLoadMoreSpy = vi.fn(() => canLoad.value)
+    useInfiniteScroll(mockElement, mockHandler, {
+      canLoadMore: canLoadMoreSpy,
+    })
+
+    await flushPromises()
+    expect(mockHandler).not.toHaveBeenCalled()
+
+    canLoad.value = true
+
+    mockElement.dispatchEvent(new Event('scroll'))
+    await flushPromises()
+
+    expect(mockHandler).toHaveBeenCalledTimes(1)
+  })
+
   function givenMockElement({
     scrollHeight = 0,
   } = {}): HTMLDivElement {
diff --git a/packages/core/useInfiniteScroll/index.ts b/packages/core/useInfiniteScroll/index.ts
@@ -76,10 +76,16 @@ export function useInfiniteScroll<T extends InfiniteScrollElement>(
 
   const isElementVisible = useElementVisibility(observedElement)
 
+  const canLoad = computed(() => {
+    if (!observedElement.value)
+      return false
+    return canLoadMore(observedElement.value as T)
+  })
+
   function checkAndLoad() {
     state.measure()
 
-    if (!observedElement.value || !isElementVisible.value || !canLoadMore(observedElement.value as T))
+    if (!observedElement.value || !isElementVisible.value || !canLoad.value)
       return
 
     const { scrollHeight, clientHeight, scrollWidth, clientWidth } = observedElement.value as HTMLElement
@@ -102,7 +108,7 @@ export function useInfiniteScroll<T extends InfiniteScrollElement>(
   }
 
   const stop = watch(
-    () => [state.arrivedState[direction], isElementVisible.value],
+    () => [state.arrivedState[direction], isElementVisible.value, canLoad.value],
     checkAndLoad,
     { immediate: true },
   )
