Pagination & Lazy Loading - Laravel Livewire v3 Tutorial #episode 13

Hello friends Tony here in this video I'm going to talk about pagination and lazy loading here I am in the Livewire documentation website and we have in the features we have a pagination section and here we can see L's pagination feature allow you to quer a subset of data and provides your users with the ability to navigate between pages of those results now because larav paginator was designed for static applications in a nonl Weare app each page navigation trigger a full browser visits to new URL containing the desired page so for example a page two however when you use pagination inside the Live Wire component users can navigate between Pages while they remaining on the same page so Livewire will handle everything behind the scenes including the URL query string with the current page okay and here we have an examp example so you must use the with pagination tra we need to use that tra to uh see that uh single page application look like and we can say on the class use with pagination and we can import that from the live wire with pagination and then on blade we can do just do the lar stuff calling post links okay so let's open the project okay so here I am in the project and for this user I have created six tasks as you can see here and I'm going to Pate by five so let's open the class of a task list because here we have the task list component okay so let's open first the tasks list class and in here when you get the the task for this user I'm going to use task pagination pinate by uh five and let's save now as you can see here we have six buty refresh and now we have only five because we pinate by five now let's open the blade so let's say tasks list blade and here we make a for each after this for each I'm going to add a div and say with a class be margin top of two margin bottom I'm going to say 12 and padding of two and in here I'm going to render the pagination I would say dollar sign tasks and call the Links method now as you can see we have five and there we have a pagination if I click the two we navigate the page two but as you can see we navigate like a larav application so it's going to be reloaded here as you can see we have reloading here now let's use that with pagination trade okay so let's go to task list class and here when we use that trade so with pagination and save also make sure you use with pagination here import that and just by adding that if I refresh and let's go to we are in the page one as you can see up here if I go to page two we have a single page application no reloading very fast and just by adding this with pagination in our class okay that's it all about what I wanted to show you about pagination we have more here but this is going to be if we want to deep Di in the pinish now let's go to Livewire lazy loading feature so Livewire allow you to Lazy load components that will otherwise slow down the initial P initial page load out so for example we have here an example and then to enable the lazy loading you can pass the lazy parameter in the component just by doing this adding the lazy compon uh parameters into the component and what where we can do that in the tasks index plate when we render the task list because I'm going to Lazy load the lists here I'm going to just add here lazy like this if I save and as you can see if I refresh first it's going to show the form and then the list of course if I inspect the element and go to network slow 3G refresh and yeah here we have the form and then it's going to loow out the uh list here now if we go here also and scroll down we have this rendering placeholder HTML so by default Live Wire will insert an empty div for your component before it is fully loaded but we can add this placeholder method to render any kind of placeholder HTML you like so here we have the example we can create this method and render so in the task list we need to create that placeholder method because here we have the lazy and the task here we added the lazy so on the task list now we need to create this placeholder and we can return HTML like this or I'm going to return a view so let's say view here and I have created a skeleton page and here I'm going to return that page so skeleton if I show you the skeleton here in the resources views here is the skeleton blade is just the skeleton I have copy from the flow bite you can go and copy what you like there and I returned here now by adding this method in this task list class let's see what is going to change refresh and now we have a skeleton here instead of empty page very nice very beautiful just by by adding this method and of course the skeleton page or you can add directly the in the HTML here that skeleton or the SBG you like so it's very simple very easy to do and of course so rendering a place holder via view what I have done you can add also parameters here okay friends that's it all about this video what I wanted to show you the lazy loading and pation how we can work with a live wire is very easy all the best and don't forget if you like such a video subscribe to my channel uh like the video share with your friends and all the best thank you very much and see you in the next one

Channel: Tony Xhepa

Views: 2,010

Keywords: laravel, vuejs, livewire, laravel 8, laravel 9, laravel crud, laravel 8 tutorial, laravel 9 tutorial, laravel 10, laravel filament, livewire 3, livewire v3, laravel livewire v3, laravel livewire v3 tutorial, learn livewire v3, laravel livewire full course, laravel livewire full tutorial, tutorial, course, code with tony, Laravel Livewire v3 Tutorial, laravel for beginners, laravel livewire for beginners, livewire installation

Id: EMbqPZV1aO0

Length: 7min 35sec (455 seconds)

Published: Mon Nov 06 2023