Build a Livewire CSV Importer
This episode is for members only

Sign up to access "Build a Livewire CSV Importer" right now.

Get started
Already a member? Sign in to continue
Playing
24. Updating the import progress UI

Episodes

0%
Your progress
  • Total: 2h 20m
  • Played: 0m
  • Remaining: 2h 20m
Join or sign in to track your progress

Transcript

00:00
So to connect everything together here with the UI we want to go ahead and once we hit import see this appear so we need to refresh this component somehow and then of course what we want to see is the progress so we're going to do both of these things in this episode. So let's start out just by making sure everything's cleared out so we're going to clear out this
00:21
current import here that we've been testing with and we're going to make sure customers is empty and we're going to start with refreshing the csv imports component so this is the of course component that shows all of our imports now to do this what we're going to do is set up a listener on this component which will just refresh this entire component so let's go ahead and create
00:41
our listeners array here we've already looked at this and let's just give this some sort of key so we're going to say imports dot refresh and what we can do is call the refresh method which will refresh and give us the new data within this component so all we need to do is emit this event from somewhere and then go ahead and see the updates so let's go ahead and just grab this
01:06
here head over to our csv importer and we're going to do this under the import method i'm going to do this right at the end after we have dispatched our jobs to the queue so we're going to go ahead and say this emit to we don't need to emit this globally we're going to emit this to first argument which is going to be the csv importers component and that will go ahead and
01:34
refresh everything for us okay so let's go over and just check this out let's hit import remember our queues are still not running but what we should see is once we've selected our csv and we've mapped all of these up and successfully put this into the queue we should see this appear great so this is all working nicely now we've got a little bit of recessing to do here which we'll
01:57
cover in the next episode but at least we see this progress in here now so now whenever we refresh the page that is always going to show because every single time we reload this we're getting back that information from that database data that we're persisting now what we need to do is poll for this updating so i'm going to go ahead and open up the console just here open up
02:17
the network tab and we're going to head over to the xhr requests and we should see these rolling in once we set polling up now polling within livewire is a concept that means that we can go ahead and just refresh this component or part of this component as we need so over in our csv imports over on this div just here in fact we can do this on a sort of outer div here in fact
02:42
we could probably do this on the root level we're going to go ahead and say wire poll and we're going to set a time for this so let's say one second so effectively what this is going to do if we don't supply a method is just going to refresh this entire component or what we've defined every second so we're just going to see this update now what we can also do is add other
03:01
modifiers like visible it's probably a good idea to do that we only really want to be polling this when the user can see this particular component there's no point sending ajax requests through when they can't see anything so we're going to go ahead and add that in there let's go over and just give this a refresh we're going to hit import and you can see that already if we just pull this
03:24
up we are making a poll to this every second if i go ahead and close this off notice that it stops that's what i was talking about we don't want to be pulling this when we can't see anything so if we open up import that's consistently sending a request through every second to update this now you can update the frequency of this so you could define milliseconds if you wanted to i
03:44
wouldn't recommend that or bump this up to three four five seconds uh whatever you think is suitable i'm going to set this to two for now but of course tweak that how you need so i'm going to leave this open and then i'm just going to start the queue we're not going to refresh the page or anything like that we're just going to go ahead and start our queue up using phps and horizon and what we
04:03
should see is of course the model being updated and we see the progress of this updating as well and then finally once that job finishes or the whole batch finishes that scope no longer applies so we don't see that import so there we go that is how we update first of all when we upload a file and secondly when we want to see the progress and that's where we've used polling

Episode summary

In this episode, we're focusing on making our import progress UI feel much more dynamic and responsive. First, we hook things up so whenever you hit the import button, the UI immediately updates to show the new import in the list, without needing to reload the page. This involves setting up a Livewire listener and using the refresh method, ensuring our component always reflects the latest data right after an import is triggered.

Once we've got that working, we move on to making sure the UI also shows progress updates as they're happening. Here, we introduce Livewire polling, setting our component to auto-refresh every second (or whatever interval works for you). To optimize things a bit, we only enable polling when the user actually has the import UI visible—no need to hammer the server if no one's watching!

Finally, we see it all come together: after starting the queue, the import progress updates in real-time, and once everything is done, the UI updates to remove the completed import job from the list. Now, our users see up-to-date import information without any manual refreshes or delays!

Episode discussion

No comments, yet. Be the first!