Issue with loadPrevious and scrollable

[tau150]

Hi,

I have infinity working properly in a list, with the scrollable prop set, everything it's ok, but when I added a startingPage different to the first one things messed up. What is happening is, once I added the infinity-loader above the list, and for example startingPage set to 2, it's loading page 2 and page 1 before it, and that is ok, but, page 3 never loads, I have to scroll up and scroll down several times, and in each action previous page are loading again, having the same data multiple times. I am filtering the data to show just once. But that is not enough, in this case I have set a startingPage at 2, so, I can see the page 2 is requested, then the page 1, and after that I can see the loading indicator and nothing happens. But if I scroll a little bit up it try to fetch page 0, then I scroll down, page 1, scroll down page 2, scroll down and now it's fetching page 3. I have tried some workaround with the buildParams method but couldn't find a way to solve it. Is there some way to don't fetch the data when is scrolling up for loadPrevious? or maybe something to do on buildParams?

I would appreciate any help with this!

{{#if conversations}}
  {{#unless pagination.conversation.reachedInfinity}}
    {{#infinity-loader infinityModel=conversationsList.conversations
                      loadPrevious=true
                      }}
    {{/infinity-loader}}
  {{/unless}}
  {{#each conversations as |conversation|}}
    {{conversation/list-item conversation=conversation
     ........
  {{/each}}
  {{#unless pagination.conversation.reachedInfinity}}
    {{#infinity-loader infinityModel=conversationsList.conversations
                      scrollable='.conversationsList'
                      eventDebounce=150}}
      {{loading-dots}}
    {{/infinity-loader}}
  {{/unless}}
{{/if}}

[malgasm]

I'm a bit late to this issue, but I did end up resolving the issue by replacing the loader component in my app. I forked this project and made a a commit that demonstrates the change, but you can debug and fix this in your own project without forking the addon by creating your own infinity-loader component.

The change I made was essentially to check twice per second to see if we had reached the bottom, and if we had, to run the routine to fetch new results. I noticed that there was an issue with ember-in-viewport not calling its onExit handler properly, which prevented the rest of the code from running that would eventually allow new records to be fetched.

the commit is here: https://github.com/malgasm/ember-infinity/commit/d96a5d5b597ea0e11a15c31910cfa4e044bd6d42

here are the changes

1. imported Ember runloop's later:

import { later, cancel, debounce } from '@ember/runloop';

2. added to the component's didInsertLoader method:

later(instance, function() {
  this.evaluateHeight()
}, 500);

3. added this method

  evaluateHeight() {
    if (this.isDestroyed) {
      return
    }

    if (this._viewportBottom() > this.elem.getBoundingClientRect().top) {
      this._debounceScrolledToBottom();
    }
    later(this, function() {
      this.evaluateHeight()
    }, 500);
  },

hope this works for you too!

[armin11]

very cool - fixes the error ;-) - thanx a lot