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

feat(VInfiniteScroll): add reset method #20637

Open
wants to merge 12 commits into
base: dev
Choose a base branch
from

Conversation

giftimie
Copy link

Description

When the VInfiniteScroll reaches the 'empty' state, it is not possible to get out of it without doing any tricks such as caching the done method.
Many users are using this component to paginate search results, and when a specific search returns zero items, the component will be stuck in the empty state

closes #20308
closes #19935

Markup:

<template>
  <v-app>
    <v-container>
      <v-infinite-scroll ref="infiniteScrollRef" height="300" side="end" @load="load">
        <template v-for="(item, index) in items" :key="index">
          <div :class="['px-2', index % 2 === 0 ? 'bg-grey-lighten-2' : '']">
            Item number {{ item }}
          </div>
        </template>
      </v-infinite-scroll>
      <v-btn @click="reset">Call reset</v-btn>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'
  const infiniteScrollRef = ref(null)

  const items = ref([])

  function reset() {
    items.value = []
    infiniteScrollRef.value.reset()
  }

  function load({ side, done }) {
    setTimeout(() => {
      if (items.value.length >= 40) {
        done('empty')
        return
      }

      const arr = Array.from({ length: 10 }, (k, v) => (items.value.at(-1) ?? 0) + 1 + v)
      items.value = [...items.value, ...arr]

      done('ok')
    }, 1000)
  }
</script>

@giftimie giftimie force-pushed the feat/v-infinite-scroll_reset branch from 7730f54 to 6af686d Compare November 15, 2024 21:47
@giftimie giftimie requested a review from J-Sek November 15, 2024 21:58
@J-Sek J-Sek self-assigned this Nov 16, 2024
@laa-1
Copy link

laa-1 commented Dec 24, 2024

I also encountered this problem when I tried to combine VInfiniteScroll and paging

@erikvdplas
Copy link

@J-Sek Any chance this PR will get merged? Solution seems to work well and the method seems to be highly-requested by the community. I currently encounter this issue as well. If I can do anything to expedite the process, let me know.

J-Sek
J-Sek previously approved these changes Jan 23, 2025
if (props.mode !== 'manual') {
nextTick(() => {
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wish I could see at least one example where it would fail when implementation omits these rAF wrappers. Or maybe you could tell me if these were copied from done "just in case" or for some actual reason.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On my end it also worked fine with and without, I just copied them from above because of #17475

@J-Sek J-Sek force-pushed the feat/v-infinite-scroll_reset branch from 23c143f to fec2cab Compare January 23, 2025 18:50
@J-Sek J-Sek requested a review from johnleider January 23, 2025 19:05
@J-Sek
Copy link
Contributor

J-Sek commented Jan 23, 2025

Nevermind, linting fails for spec files.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants