InfiniteScroll: Loading 3 pages worth of documents, appending to array, then revert back to returning 1 page worth

[martynball]

Hey, i've basically implemented an infinite scroll function to my Vue component, however i'm having issues restoring the position if the user goes back in history. Lets say they scrolled down and loaded 3 pages worth of documents, then clicks a link on a document, if they hit back I want all 3 pages worth of documents to be loaded.

Here is the basic code i'm using to achieve this, bare in mind this code is spread across multiple components, but you can see the logic of it.

I have got an Observer, once this is in view I increase the page number, rather than replace my entire results array I append to it, which in turn creates infinite scrolling.

current is the current page.
lastRequestId is the last request
requestId is the current request

The below is in a different component, so I send the page increase Event back to the root component.

new IntersectionObserver(() => {
    if (this.lastRequestId !== this.requestId) {
        window.EventBus.$emit('search-set-page', this.current + 1)
        this.lastRequestId = this.requestId
    }
}, {
    rootMargin: '0px',
    threshold: 1.0
}).observe(this.$refs.bottomOfResults);

This is the root component, I have just pulled out the key code which does the logic.

window.EventBus.$on('search-set-page', page => {
    if (page < 1 || page > this.state.totalPages) {
        console.error('You tried to change to a page that doesn\'t exist...');
        return;
    }
    this.setCurrentPage(page)
});

this.driver = new SearchDriver({});

// This is where it does the results appending logic.
this.driver.subscribeToStateChanges(state => {
    this.state = state
    this.current = state.current
    if (!this.results[state.requestId] && state.results.length) {
        this.$set(this.results, state.requestId, state.results)
    }
    this.requestId = state.requestId
});

setCurrentPage(page) {
    this.current = page;
    this.driver.setCurrent(page);
},

My Problem?

Well, lets say I have scrolled down to load 3 pages worth of documents. If I refresh I now need to load these again and send the visitor to where they refreshed, I can set the results per page to current * results per page which works fine.

But due to API delays and other timing issues i'm struggling to set this back once the results have returned. I tried adding a setTimeout and then changing the resultsPerPage AND current however it was changing the resultsPerPage first, which just results in duplicate records being returned, and it never changed the current.

Anyone got any experience in this?

[JasonStoltz]

I don't have experience with this. I opened a feature ticket a few months back to figure out a strategy to deal specifically with infinite scroll. #560.

I'll leave this issue open for now in case some folks drop by and are able to offer some advice.

It sounds like you're trying to find a way to set resultsPerPage and current in a single call, rather than 2 separate calls, in order to avoid two API calls.

I added support for action batching a while back (#391). If you were to call setResultsPerPage and setCurrent back to back, they should be condensed into a single update.

[botelastic]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
Is this issue still important to you? If so, please leave a comment and let us know. As always, thank you for your contributions.