New in Inertia
Playing
05. WhenVisible component

Episodes

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

Transcript

00:00
If you've ever used the Intersection Observer API to only load data when a user hits a certain part of your page or scrolls to a certain part of your page, Inertia has solved this with a When Visible wrapper. Let's take a look at how it works. OK, so we'll start off by just finding out some fake data over in web.
00:19
Once again, just passing this down to the dashboard. Let's just start with one and then we'll add a few more and see how this works. So for users, let's just go ahead and say user get and we'll hop over to our dashboard page. And let's just go ahead and dump these in some sort of container down here.
00:37
OK, so let's create out a container for this. Let's give this a minimum height of. Let's say 500 pixels. We'll just keep it simple and we'll set a background to grey 200 just so we can see what this data looks like.
00:54
We'll go ahead and pull in the users. And of course, at the top here, make sure we pull these in with defined props. And that's just going to be an array of data. OK, so sure enough, we see a bunch of users in here.
01:05
It doesn't matter at the moment that we've only got one user. We're just going to use this to demonstrate. OK, so let's say that we had a container underneath this, which when the user lands on the page, it's not visible. Now, there's no point making a request to load that data if it can't be seen, particularly if you have a slow request.
01:23
So what we're going to do is head over to web. We're going to build out a new piece of data. Let's just call this articles, but still keep the users in there. And what I'm going to do is go ahead and set this to be slightly slower.
01:36
So, again, we'll just use a sleep in here just to set this to, say, two seconds and then go ahead and return these users. So we're just going to pretend that these are a bunch of articles. Now, we would do the same thing. We would want this data on the page at some point.
01:50
So we could go ahead and define out the articles in here and then we could create another wrapper for this. So let's pull this down to here and let's go ahead and output articles. Now, the whole point of this is when we load the page, we're going to see a two second delay, even though we don't necessarily have access to this content. I'm going to go ahead and space this out as well, just so we get a little bit of spacing between these two things.
02:13
OK, so the goal is to be able to scroll down. And as soon as we hit this point or we hit a sort of threshold, we want to then start loading this data in. Now, with an Inertia V1, what we would have to do is manually go ahead and use the Intersection Observer API or use this from a package like ViewUse. We would then have to add the Intersection Observer onto this element.
02:37
Then we would have to go ahead and create out some sort of method in here. So let's say articles visible. And then we would have to go ahead and manually use router to do a reload on that optional data, which we've not marked as optional at the moment. But that's pretty much the process we would have to go through.
02:56
So the first step here is to mark this data as optional or lazy. Now, lazy once again has been deprecated. So we're going to have to use the inertia optional helper here. So let's say optional. And let's go ahead and create our closure in here.
03:12
And let's pull this data into here so we can get rid of this closure. So we know now that using optional, this is going to have a fast page load initially. But then we can optionally load this data in at some point. And that's where in V1 we would have had to do this manually using the router with the Intersection Observer API.
03:31
What we can now do is pull in that when visible component. So once again, this gets pulled in from the inertia V3 package or whichever client side framework that you're working with. And then we can just start to use this down here. So how does this work? Well, let's go ahead and get rid of the articles here.
03:49
Let's pull in when visible and we're going to wrap that round. And of course, we're just going to dump the data out in here. So it's similar to what we saw a little bit earlier with deferred props. But this will only start to load this data in when this component, wherever you place it, is visible.
04:06
Now, once again, we can provide in the data that we want to be loaded as soon as this particular component comes available or is visible. And that is articles. And once again, we're also going to need a fallback in here. So let's define out a template in here with the fallback name. And then in here, we could just say something like loading like we did before when we looked at deferred props.
04:29
OK, let's take a look at the difference now. So let's go off to the top and give the page a refresh. And you can see that we get a fast initial page load. Now, as I scroll down, you'll see that this now says loading and then it starts to load the data in.
04:45
So as soon as this when visible component becomes visible on the page, we are going to load any of the data, optional data that we've specified in here. We get the fallback while this is loading, which, of course, you could just leave empty if you wanted to. And then we go ahead and show out the data that we want to see. So, again, this is really useful when combined with infinite scrolling, which we're going to look at very, very shortly.
05:10
But there's a couple of other things that we can do with the when visible component that I'm going to show you now. So if we go over to web, let's create out a new piece of data in here. And let's just call this post again. We'll just keep the user data rolling through here with a similar delay.
05:25
And let's go over and create out a new when visible component. And we'll use that same wrapper as well. So let's just pull that down to here. Let's say posts and we'll output our posts in here.
05:38
Let's go up to the top and make sure we define our posts in our props. OK, so this is going to work in exactly the same way. So as we start to scroll, that's going to load that data in. And then when we start to scroll down here, that's going to load that data in.
05:53
Let's use the last one to show some of the other things that we can do. So we've got our posts here. One of the things that we can do is add in a buffer. So this is the amount of pixels from the top that we want to start loading this data in as a kind of preload for this.
06:12
So imagine 300 pixels from the top of this is when we want this component to actually be visible or marked as visible to then start loading this data in. So if we are really careful here, we can demonstrate this. So let's give this page a refresh. Let's come down to this one.
06:27
And then if I scroll down a little bit here, just before I get to the end of this, that's already going to start loading that data in. And it will be there ready for us before we see this element on the page. So you can control that buffer to make the experience of loading the data a little bit more seamless. So it's already visible by the time the user has gone and scrolled to that component.
06:51
Now, also by default, these will only be loaded in once. So if we head over to our network tab here and just take a look, let's go up to the top, give this a refresh. Of course, we see no fetch XHR requests. If we scroll down, we get that dashboard one and we get the last one in there as well because we've added that buffer.
07:09
Now, if I go up to the top of the page and scroll back down again, of course, it doesn't make sense to reload that data back in. But if you're building something where you would want this to happen, you'd want the data to be reloaded again and again. You could mark one of these or all of them as always. This will mean that this won't just be triggered once.
07:28
It will be triggered every time this particular element comes into view again and again. So let's take a look at the difference that that's made. We'll scroll to the top here and let's go ahead and scroll down. So we see the last one that data gets loaded in.
07:41
I'm going to scroll back up to the top, back down again. And this last one gets refreshed because we've marked it as always. So no matter how many times this comes back into view again and again and again, we're always going to be reloading and refetching that data. And this could be useful for some sort of control panel where you want the data to be fresh, but you don't want to use something like polling and make too many requests.
08:06
So you only want this data to be reloaded every time this particular panel comes into view. So there we go. Another really useful wrapper around something that we would have to do in V1 manually. We don't have to write any additional code here. All we need to do is mark this as optional or lazy and then go ahead and use the new when visible component.

Episode summary

In this episode, we dive into one of the handy new features in Inertia: the WhenVisible component. If you've ever wrestled with the Intersection Observer API, or set up complicated watchers to only load data when a certain part of your page comes into view, you'll appreciate how much this simplifies things!

We start by simulating some fake user and article data, showing how you might output this data inside containers on your dashboard. Then we set up a scenario where you wouldn't want to load data for some articles until the user actually scrolls down to see them — perfect for improving performance, especially when you have slow API requests.

Previously, you would've had to manually wire up Intersection Observer or use a library like VueUse, listening for the component to come into view and then triggering a reload. Now, all you need is to mark your data as "optional" (using the new inertia.optional helper), and wrap the relevant section in the new WhenVisible component. As soon as that part of your UI appears, the data loads — with a fallback for a loading message while data is on the way.

We also explore some extra configuration, like setting a buffer (which lets you start loading before the component is fully in view), and toggling the always prop to reload data every time the component comes into view (great for admin panels needing always-fresh data without polling).

By the end, you'll see that with just a small amount of markup, you can easily defer loading data until it's actually needed — no need to bolt on extra JavaScript, just leverage that lovely WhenVisible wrapper from Inertia.

Episode discussion

No comments, yet. Be the first!