HTMX + Django: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Exploring the examples on
Lecture: Example: Lazy loading

Login or purchase this course to watch this video and the rest of the course contents.
0:00 The next example that we're going to explore is not one that actually appears in our final
0:05 application, but it's extremely useful. Let me lay out the scenario for you.
0:08 Imagine I've got a page trying to render it for the user, right? They make a request,
0:14 we want to show it to them, but maybe it's doing some kind of report or there's some part of the
0:17 page that's actually really, really slow. And I want to get most of the page shown to them and
0:22 then have this other slower section like a report or a graph or something along those lines. I want
0:28 We want that to be generated and delivered to the user as soon as possible, but without blocking the original page load.
0:35 And we also want some kind of indicator for that's happening. That would fall under the lazy loading section. Check this out. That's pretty simple.
0:43 So what we do is we say this section of the page, this whole section, that's one of those slow pieces.
0:49 What I want to do is I want you, htmx, to go to the server and call /graph. And when it's done, put it right here.
0:56 But while it's loading, I want you to show this indicator with those bars sort of spinning around here.
1:03 And the trigger is going to be that the page has loaded. So just the page was shown and then fill out these missing pieces that are slow.
1:11 In order for this to work, you're going to need a little bit of CSS somewhere included
1:15 in the page to basically have some of the behaviors that are indicated here happening. And down here we have our graph.
1:22 And this is the part that was slow, but it doesn't take that long. like half a second or a second.
1:28 So what we didn't see is this actually loading because by the time I got down here it was
1:32 done but if notice if I load this page it's instant but there's like a one second processing of something else.
1:39 If I scroll down I can refresh here and show that to you. So page is loaded but now it's thinking on the graph request.
1:47 Input came back or the response came back. Boom! Here's our report. And let's go and look at this.
1:53 So our initial state was that the page was loaded and this section was here, right? This is what we talked about.
1:59 But then as the document loaded was complete, I said, ""All right, now we got to fill out the slow pieces.
2:06 And it went and did a request for get/graph, no parameters. The response was, ""Here's your generated image of your report. How cool is that?
2:15 So I'm sure there are many websites that there's a little part of it or a little piece of information that's slow and the rest is really pretty quick.
2:23 And yet the user experience is I go there, I click and I wait and I wait and I wait and finally the page loads. This would be so much better.
2:31 Show most of the page and calculate the little final things that you need using one of these lazy loads.

Talk Python's Mastodon Michael Kennedy's Mastodon