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

[theRenard]

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]

Just ran into this as well, very confusing.

[Tresky]

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.