Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Showing the "wrong" slot when all results fit into one call #318

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

Open
theRenard opened this issue Aug 26, 2021 · 2 comments
Open

Showing the "wrong" slot when all results fit into one call #318

theRenard opened this issue Aug 26, 2021 · 2 comments

Comments

@theRenard
Copy link

Version 2.4.5

Vue.js version 2.6.12

Reproduction Link None

Steps to reproduce

Just load a very short number of items so that no second api call is needed and our state is still isFirstLoad: true.

What is Expected?

We should have the message/component from the no-more slot. Having some items shown in the list but serving at the bottom a message like 'no-result` is misleading.

What is actually happening?

As we send a $status.complete event to the component but we are still in isFirstLoad: true we get the message/component in the no-result slot, which is wrong imho because we do have results.

@naspinski
Copy link

Just ran into this as well, very confusing.

@Tresky
Copy link

Tresky commented May 11, 2022

I realize this issue is ancient, so I'm commenting for future people with the solution to this problem.


I experienced this issue as well. After looking through the packages code, though, I realized this is not a bug, but intended behavior (see here). We are just using it incorrectly.

I'm imagining your code looks something like mine where we are tracking "is last page" manually and calling complete:

// Incorrect: Calling `complete` when we loaded the last page
axios.get(...)
  .then(() => {
    if (isLastPage) {
      $state.complete()
    } else {
      $state.loaded()
    }
  })

The package doesn't want you to track it. Instead it wants you to check "did we get 0 results". See docs.

// Correct: Calling `complete` when the request returns 0 records
if (data.length > 0) {
  $state.loaded()
} else {
  $state.complete()
}

In other words, don't call complete until you get 0 results back. It'll cause an extra request to go out, unfortunately, because the library doesn't allow you to short-circuit the logic, but it'll make the correct message show up.

I believe the best behavior would be to allow you to not make that extra request, but if you want to use this component right out of the box, this is what it's expecting.

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

No branches or pull requests

3 participants