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

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