Infinite Scroll Loading with Laravel Livewire!

[@DavidGrzyb]

Hey everyone, I built this without much preparation and forgot to pass the options to the IntersectionObserver at 20:34. The reason the demo works is because the options I defined are the default options for the Observer. Sorry about that! 😅 1:15 - Creating new Laravel project 2:52 - Seeding the Database
 3:37 - Installing TailwindCSS 6:45 - Livewire Installation 7:32 - Main Template File Creation 10:52 - Creating Livewire Component 11:46 - Creating our route 12:20 - Valet Link & Secure 12:42 - Building Component Class 15:53 - Building template 19:50 - Implementing wire:loading 20:34 - IntersectionObserver implementation 25:34 - Final Demo

[@AtomCoder]

Great video, David.

[@ganeshkgp]

Just started learning livewire yesterday its very easy if you know laravel Thanks man for this video 😍

[@mithudas6873]

That's an awesome video. Thanks for this tutorial and hope we will get more video like this with liveware.

[@tur_nr]

Thanks for the video, really informative. I'm slightly concerned about performance though. What if you have 10 million records and the user keeps scrolling. This implementation will query for 10 million records. Is there a way for Livewire to use a cursor?

[@DavidGrzyb]

Hey, sorry about the late reply. Every scroll makes an additional query and limits the number of returned records (take() is limit()). I don't think querying all the record at once and managing them in memory would be a good solution, it could cause memory issues. That leaves us with the cursor() option, but that will also query, and will query for each record IIRC. I'm really not sure what the best solution here would be 😅

[@DiazGunturFebrian]

@@DavidGrzyb thanks for the video. lets say first load will get 10 records, second load will get 20 records? is the second load will only get 11 to 20 records only or the second load get the first 10 record again from db?

[@justdoit7210]

i really like your tutorials, simple and very friendly. Can you say also settings from vscode and plugins and theme? Thanks!

[@DavidGrzyb]

Hi, my latest video goes over this!

[@erik_lopez_]

Please answer me... where is declared LOOP variable?

[@DavidGrzyb]

The $loop variable is available within the blade for loop, it's not declared anywhere

[@erik_lopez_]

@@DavidGrzybI thank you, much ... Greetings from El Salvador...

[@gelbehexe2010]

Thanks for this video. But doesn’t load more always reload all data depending on current loadAmount?

[@DavidGrzyb]

Hey, It reloads the all data up until the maximum (loadAmount), or all data if we scroll to the bottom of the page where there are no more records. My thinking about this is done without one query regardless, so its probably better to requery all records up to the limit instead of querying the next 10 and appending within memory. Manipulating data within memory is also not great.

[@sajjadzamany9525]

You said it very well thank you

[@mithudas6873]

Please make a project with laravel liveware.....

[@neerajsinghtangariya2587]

If I want to addd loading indicator between them while scrolling how can I do this..?

[@AtomCoder]

Within the if condition at the bottom of the page, were he's checking if there are more records, maybe add an 'else' and add wire:loading to the element that displays your spinner.

[@neerajsinghtangariya2587]

@@AtomCoder okk thank you I'll try this one

[@ozgurozer8579]

for beatiful video thank you.

[@abhishek.burkule]

Is this the efficient way to do so? 1-10 then 1 to 20 then 1 to 1000...

[@DavidGrzyb]

Ultimately it comes down to either re-querying the whole thing or managing currently displayed records in memory and appending to a collection with each new query. Since we would have to do a new query regardless, I decided to just query all the data again. Not sure what would be more efficient, though I guess it would also greatly depend on the query you are running repeatedly.

[@nguyenphuongnam1232]

Thank u ❤️❤️❤️

[@briareos-lawrence]

This way is mess, perfectly you need to store items per mage and number of pages loaded, in query only take count of items per page and add pages count, in front you need to render only items that added but do not touch already loaded, I don't know how to do this using livewire but You can do this by returning only html of new items from addMore method in promise and call skipRender() to prevent entire component re-render. After item beign returned, add html by javascript to the end of page

[@mikemwangi849]

Where is the source code link

[@DavidGrzyb]

The description has been fixed, link is there 😊

[@yacobee]

use Breeze package and save setup time.

[@DavidGrzyb]

That's exactly what I did in my latest video 😎

[@mokhosh]

Great video. Subscribed. But this gets very inefficient the more you scroll down. You're basically loading from 1 to 10, then from 1 to 20, then from 1 to 1000, and not just 10 more at a time.

[@DavidGrzyb]

Thanks for the sub! It's a fair point, and one I didn't think about for the tutorial. Makes me wonder if storing all those records in memory and appending to them would be that much better though, because you still have to make the query 🤔

[@mokhosh]

@@DavidGrzyb you dont need to store the old ones. You just query the new page and only append the new page to existing html.

[@NulledExp]

@@DavidGrzyb @mskhosh u cant do this withing the same component u need a child and the child need a conditioned render return one for when it initialize and one for when u load items and when u load items u shouldnt load the actual child u should load another component with the child included on it again so the data will stay and wont get re-rendered u should also pass vars to the child each time these vars should be the number of data it should return and the number of data it have returned already and use skip() and take() instead of paginated

[@stewarty114]

@@NulledExp is there a tutorial for this?

[@NulledExp]

@@stewarty114 don't really know but if you want let me know what u trying to achieve exactly and I could try to help/guide you. for example, I'm doing a small project without any special architecture just raw laravel with livewire, and the business logic include comments and notifications so i had to implement something like this but a bit more complex(still easy to achieve tho) so basically i made 3 different livewire classes: *Notifications *LoadMoreNotifications *IncommingNotifications then 5 views so ended with: *notifications.blade.php *load-more-notificationsc.blade.php(container that would show the actual notifications loaded when u click load more + LoadMoreNotifications component class again to render again the load more buttom ) *load-more-notifications.blade.php( only containing the Load more button that trigger a livewire event on click) *incoming-notifications.blade.php(just an empty livewire view but here i implemented Firebase realtime database for incoming notifications that trigger an Emit event to load the new notifications if the notification ID is > to the last id loaded) *incoming-commentsc.blade.php(this contain the new loaded notifications + LoadMoreNotifications component class again to keep it listening after receiving an update) so basically notifications will only render 1 view but, the others will render conditionally 2 different views one as notification container and other for the load more buttom and the incoming listener. this is very easy to achieve livewire is not the best doing things like this but u can make it work its just a bit confusing at some points, you will need to paginate(DONT use withpagination just the default $model->paginate($this->notifPerPage)) on the Notifications and LoadMoreNotifications classes, and share the init vars like -> lastloadedid, notifPerPage , i hope with this you have a better idea on how to achieve this, if need help with the logic i could make a new git repository and share it with you, I'm planing to share most small features/components that I'm currently developing for this project later on

[@Ing_Maria]

hola

[@sathia_musso]

this is not cool, it will fail miserably when you add real content and have more than 30 rows of data...