fix(useInfiniteScroll): improve promise handling and add flush post to watch

[nhquyss]

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

Description

Follow-up improvements to #5110

For detailed, see this comment in PR

Changes

• Move promise check to early return to prevent unnecessary logic execution

• Add flush: 'post' to watch to ensure it runs after DOM updates

Additional context

[pkg-pr-new]

Open in StackBlitz

@vueuse/components

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

@vueuse/core

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

@vueuse/electron

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

@vueuse/firebase

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

@vueuse/integrations

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

@vueuse/math

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

@vueuse/metadata

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

@vueuse/nuxt

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

@vueuse/router

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

@vueuse/rxjs

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

@vueuse/shared

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

commit: de3d12d

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 63.96%. Comparing base (62dfb80) to head (de3d12d).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #5122      +/-   ##
==========================================
- Coverage   63.97%   63.96%   -0.01%     
==========================================
  Files         343      343              
  Lines        7841     7840       -1     
  Branches     2425     2412      -13     
==========================================
- Hits         5016     5015       -1     
  Misses       2286     2286              
  Partials      539      539              

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

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[OrbisK]

Thank you 🙏🏽

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

[maximepvrt]

@nhquyss

[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]

@nhquyss

@maximepvrt, thanks for the reminder :)

I've added a demo above.

Let me know if you need anything else!!

[maximepvrt]

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?