Lazy Loading in a Turbo Frame

Let’s stretch this a little by adding one more feature: a count of the number of favorited items in the header. We can think of this as broadly the same as a shopping cart. Along the way, we’ll demonstrate one more Turbo feature called lazy loading.

What is lazy loading?

Lazy loading allows us to separate the static and dynamic parts of a page so that the static part can be cached and the dynamic part automatically fills itself in when the page loads. If the dynamic part is slow, then this technique can also make the rest of the page appear faster and give the user a loading symbol or the like while the slow part of the page catches up.