Infinite Scolling issue with Inertia 2.0

Using Laravel + Inertia 2.0 + Vue 3

I have implemented "infinite scrolling" and it was SUPER easy compared to the "old" way, BUT ....there's always a "but"....I have a weird issue going on.

As an example, let's say I have a "online store" with many items. Infinite scroll works great! The user can select categories to filter the items by. Here is what is weird....

user picks a category A with many results......infinite scrolling works as expected.
user picks category B with many results....infinite scrolling works as expected.
user then picks category C with only 1 page of results.
user goes back and picks category A again.....infinite scrolling stops working. It's as if it wants to load the next page (ie. the "reachedEnd" computed property is "false" so the DIV for it appears with a spinning icon) but it is not actually merging (or calling) new data from the controller. It just stops. Watching the network tab, it doesn't even make the request for the next page.

Ideas?

EDIT: more research....it seems if I hit the "end" at any time and "ALWAYS" gets set to off....it never "resets" on page reloads or anything. For instance, from the beginning, if I scroll to the end....then pick "category A" which has several pages, it just acts like step 4 above again. So is there a way to "reset" ALWAYS again? I mean the computed value is set to the correct value to reset it but it doesn't seem to pick it up....again, it seems like once it is off (ie. false), it is just off.

CESolomon

1 year ago

Level 19

SOLVED: Simply enough....I just added a "v-if" directive to WhenVisible such that

v-if="!reachedEnd"

and that did the trick!

For the "page" param, I also added a computed property to help....

:params="{
     preserveScroll: 'errors',
     data: {
         page: nextPage,
     },
     only: ['items', 'pagination', 'filters'],
}"

where nextPage is...

let nextPage = computed( () => {
	return props.pagination.last_page === 1 ? 1 :   
                props.pagination.current_page < props.pagination.last_page ?
                    props.pagination.current_page +1 : props.pagination.last_page;
}

Hope this helps others!

Please or to participate in this conversation.