Open in StackBlitz

npm i https://pkg.pr.new/@vueuse/components@5122

npm i https://pkg.pr.new/@vueuse/core@5122

npm i https://pkg.pr.new/@vueuse/electron@5122

npm i https://pkg.pr.new/@vueuse/firebase@5122

npm i https://pkg.pr.new/@vueuse/integrations@5122

npm i https://pkg.pr.new/@vueuse/math@5122

npm i https://pkg.pr.new/@vueuse/metadata@5122

npm i https://pkg.pr.new/@vueuse/nuxt@5122

npm i https://pkg.pr.new/@vueuse/router@5122

npm i https://pkg.pr.new/@vueuse/rxjs@5122

npm i https://pkg.pr.new/@vueuse/shared@5122

commit: 6b9ba2f

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 64.35%. Comparing base (f503bde) to head (6b9ba2f).
⚠️ Report is 8 commits behind head on main.

@@           Coverage Diff           @@
##             main    #5122   +/-   ##
=======================================
  Coverage   64.35%   64.35%           
=======================================
  Files         343      343           
  Lines        6641     6641           
  Branches     2030     2030           
=======================================
  Hits         4274     4274           
  Misses       1965     1965           
  Partials      402      402           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Thank you 🙏🏽

Would you mind adding some tests to cover the new handling?

@nhquyss

Thank you 🙏🏽

Would you mind adding some tests to cover the new handling?

Hi @OrbisK, sorry for the late reply.

I’ve tried adding tests for this change, but I still haven’t been able to write one that reproduces the issue.​

So I created a small live demo to show the behavior before and after this change.

Stackblitz live demo

Without flush: 'post', the API is called twice on the initial load even though the first call already returns enough items to fill the screen.

Hope this demo helps clarify the issue!!

@nhquyss

@maximepvrt, thanks for the reminder :)

I've added a demo above.

Let me know if you need anything else!!

Hi @nhquyss, thanks for the update!

I’ve just tested with the newly released v14.1.0 (which includes #5110) as well as with the PR build from pkg.pr.new.

I’m running into an issue: it triggers infinite loading of my data.

Here is a reproduction of the issue:
https://stackblitz.com/edit/github-ostrvl2k

Do you have any idea what might be causing this?

Hi @nhquyss, thanks for the update!

I’ve just tested with the newly released v14.1.0 (which includes #5110) as well as with the PR build from pkg.pr.new.

I’m running into an issue: it triggers infinite loading of my data.

Here is a reproduction of the issue: https://stackblitz.com/edit/github-ostrvl2k

Do you have any idea what might be causing this?

@maximepvrt

I think the scroll container in your Items.vue doesn't have a fixed height or max-height set.

This causes useInfiniteScroll to continuously trigger the load function because of this condition check in the composable:

const isNarrower =
  direction === "bottom" || direction === "top"
    ? scrollHeight <= clientHeight
    : scrollWidth <= clientWidth;

Without a defined height, scrollHeight always equals clientHeight, making the condition for loading the next page always true, which leads to infinite loading.

I've created a demo based on your reproduction with a max-height applied to the scroll container. This way, the next page will only be loaded when you actually scrolls to the bottom of the container.

Or if you prefer full-page scrolling, you can use useInfiniteScroll composable with document or window as the scroll element instead of a specific container:

useInfiniteScroll(
  document,
  async () => {
    await refresh();
  },
  {
    canLoadMore: () => canLoadMore.value && props.infiniteScroll,
    distance: 100,
  }
);

Hope this helps resolve your issue!!

@nhquyss A huge thank you for your help! 🙏
I thought the composable just added a div at the bottom and that if it entered the visible area, it would trigger the next load. I didn’t realize that not having a fixed height on the container caused scrollHeight === clientHeight all the time, which made it load infinitely.

Thanks again!

@OrbisK @antfu can you review this PR ? 🙏