Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report][3.4.10] v-infinite-scroll executing onLoad even after done('empty') #19042

Closed
giftimie opened this issue Jan 12, 2024 · 3 comments
Closed
Labels
duplicate The issue has already been reported

Comments

@giftimie
Copy link

giftimie commented Jan 12, 2024

Environment

Vuetify Version: 3.4.10
Vue Version: 3.4.11
Browsers: Mozilla Firefox
OS: Windows 10

Steps to reproduce

  1. Scroll down to execute the three iterations (in a real scenario this could be pages, for example)
  2. When the three executions are complete, scroll up and then scroll down
  3. The function in onLoad will be executed again, even though we already called the callback with the empty value

Expected Behavior

The callback is not executed anymore after calling done('empty')

Actual Behavior

Callback is still being called after done('empty')

Reproduction Link

https://play.vuetifyjs.com/#...

@giftimie
Copy link
Author

My idea of this would be to have this emit called conditionally if the status isn't empty nor error

As a workaround we can just manage some kind of flag that keeps track of the scroll status in our own component, so we would have something like:

// pseudocode...
const foundEmptyScroll = ref(false)

async function load({ done }) {
    if (foundEmptyScroll.value) return

    const data = await getEndpointData()
    if (data.length > 0) {
        serverData.value.push(...data)
        done('ok')
    else {
        done('empty')
    }
  }

But in my opinion this would make more sense to be managed inside the component

@JessieVela
Copy link

JessieVela commented Jan 13, 2024

Ran into the same issue. In the mean time I created a flag to stop the calls

   async load({ done }) {
      if (this.noMorePosts) {
        done('empty');
        return;
      }

      const offset = this.posts.length;
      const limit = 5;
      try {
        const newPosts = await this.getPosts(offset, limit);
        this.posts = this.posts.concat(newPosts);
        if (newPosts.length < limit) {
          this.noMorePosts = true;
          done('empty');
        }
        done('ok');
      } catch (error) {
        done('error');
      }
    },

@KaelWD KaelWD added the duplicate The issue has already been reported label Jan 14, 2024
@KaelWD
Copy link
Member

KaelWD commented Jan 14, 2024

Duplicate of #18895

@KaelWD KaelWD marked this as a duplicate of #18895 Jan 14, 2024
@KaelWD KaelWD closed this as not planned Won't fix, can't repro, duplicate, stale Jan 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
duplicate The issue has already been reported
Projects
None yet
Development

No branches or pull requests

3 participants