Infinite scrolling with InertiaJS and Laravel

TLDW:
- add a listener for the scroll event
- calculate the remaining pixels until the bottom of the page
- debounce the callback to a reasonable timeout
- make a regular axios/fetch request to the same endpoint that will return a regular json response with the additional items
- add those items in your component's local state

[@amadeuszannissimo1669]

Thank you for a useful video. One gotcha I encountered when implementing this is that you need to remove the scroll event listener when navigating to another page with Inertia. For example, if you open the "show" view of the tweet, and scroll inside it, the app would still fetch another set of tweets. To prevent this, remove the event listener in Vue's 'destroyed' hook:
```
destroyed() {
window.removeEventListener("scroll", this.loadMore);
}
```

[@lilproskater_]

Very much thanks to you! Amazing tutorial 😁

[@takaakiota81]

Awesome tutorial!

[@cdruc]

Glad you liked it!

[@yasirarafat-dev]

your video is so helpful. can you create a playlist on laravel and Inertia JS with the full project?

[@SanderCokart]

THANK YOU. hope to replicate in react!

[@NathanBudd]

I've recently started playing with Inertia, and you have some really quality content on the channel. I'm surprised you don't have a lot more subscribers!!
BTW... What's that extension you're using for the Rainbow tags?!

[@cdruc]

Hey, thanks!
I'm not using any rainbow extension/plugin - that's just a default PHPstorm setting (Editor > General > Appearance > Enable HTML/XML tag tree highlighting)

[@dericlima]

Thanks a lot for this tutorial :))

[@someone-jq3lc]

what's your editor font family?

[@ayenewyihune]

Helpful, thanks

[@jorgeluisborges8166]

why dont use this.$inertia? i dont speak english , only can read xD

[@MalteNielson]

A bit of a late answer, but I think it's because this.$inertia makes a "visit" to that page, and not just fetching the data like axios does. If "visiting" a page, this will go to the browser history, and will make that the last known url if you for example visit a tweet and go back, which then only will load ?page=2. That's at least what I got from this :)

[@skmdmusha07]

How did u import the 'UserTweetsController ' class in web.php file ??(I am facing same problem, can't import)

[@cdruc]

Hey,
I'm using PHPstorm as an IDE, and I have a key binding for "Show Context Actions" - this will pop-out the import option.
If you are using VSCode or something else, you might need to install additional plugins though.

[@skmdmusha07]

@@cdruc I am using VS Code..Can u tell me in which plug in I can get that option ??

[@AnisurRahman-gl4pu]

@@skmdmusha07 PHP Intelephense

[@tqt97]

May i know what font are you use in IDE ?

[@cdruc]

I think it’s Operator Mono
Lately I’ve switched to jetbrains mono