00:02
Building off of our last lesson where we deferred information from being loaded until the page itself is actually rendered, which is great for slow queries
00:12
or content far down on a page. Another new similar feature to InertiaJS 2.0 is load when visible, which will only load this deferred information when it's visible on the page.
00:22
So if we load our page here where this is now outside the realms of our visible page and refresh our page, it would actually not load our organization invitations until we've scrolled down
00:32
to make that section of the page visible in our browser. And it uses the intersection observer to do that efficiently. So on the client side, this actually works really similar to deferred here.
00:41
Instead of having a deferred component, we'd instead wanna use a when visible component. Let's jump down and update our end tag there to when visible as well.
00:49
It too also accepts a fallback slot. And then the main child slot is just the content that we wanna display whenever everything's loaded in. And this component also accepts a data prop
00:58
that takes in the prop that we want to wait to load until it's visible. Let's jump back over into our organization settings controller. We're gonna want to switch our invites
01:07
or whatever prop we want to defer until it's visible on the page from defer to inertia.optional. And then that also gets rid of the grouping there as well.
01:17
So we can still defer load our users and that will then be loaded whenever our page has mounted. And then we can optionally include our invitations whenever that becomes visible on the page.
01:26
So let's give that a save, jump back over into our browser. Let's scroll up to our pending invites is outside the realms of our page, give it a refresh. And now you'll see we have one organization request
01:35
going out for our users. It does not include our invites. And now if we scroll down to where our pending invitations are visible, that's where that new request goes out for those pending invitations.
01:45
We have that timeout waiting five seconds so that we can see the loading process. And there are our invitations. Once those load, they're then visible, behaviorally the same as the deferred prop there.
01:55
Now, if you want to start prefetching that information just before it's visible on the page, so maybe we get down to the bottom of our organization members
02:04
and we wanna start loading in our organization invites at that point, what we could then do is specify a new prop onto the when visible component called buffer. And this takes in a number as pixels
02:14
that we want to buffer the prefetching of this information. So if we want to prefetch our pending organization invitations 100 pixels before it's actually visible on the page,
02:24
we'd pass 100 into the buffer prop. Let's scroll back up to the top of our page and refresh our browser. We can then slowly start to scroll
02:32
and just about where we get 100 pixels above that table, which is just at the start of our card, that new request goes out to load our pending organization invitations.
02:42
And there they are. If we wanted to do something like 300 pixels instead, we could set our buffer to 300. Let's scroll back up, refresh.
02:50
And at this point, it's already at that buffer. So it's gone ahead and loaded. Let's reduce that maybe in half to say 150, give that one more save, give it a refresh.
03:00
All right, so now you can see it's not loading automatically but if we start to scroll slowly, once we reach 150 pixels above that section,
03:09
that is where that call then goes out. If we wanted our invitations to refresh every time that it becomes visible on our page, so if the user scrolls up, scrolls back down,
03:19
if we want to refetch that information, there's a Boolean prop on the when visible called always that we can pass in. If we give that a save, let's scroll back up to the top,
03:27
give this a refresh, scroll on back down. All right, our pending organization invitations are loading in at this point. We wait for it to load, there they are.
03:36
Scroll back up, scroll back down. It's loading once more. Scroll back up, scroll back down. It's still loading so it knows to wait. Scroll back up, scroll back down.
03:46
There we go, it's loading one more time. Every time that it becomes visible, it will go ahead and fetch brand new information with always provided. And then both the when visible and deferred props
03:56
can accept in an array of data properties as well if you need more than one prop loaded in for this section.
04:03
So if this was a table of both our users and invites, we could switch this to an array of strings with our invites and our users specified,
04:13
and the deferred component works the same way. And it will now wait for both of these props to be loaded in before it swaps our fallback with the actual content.
04:22
That doesn't make a whole lot of sense in this use case, so I'm gonna go back to just having the invites there.
