Lazy Loading in a Turbo Frame
Explore how to implement lazy loading in Turbo Frames to separate static and dynamic page components in Rails. Understand using turbo_frame_tag with a src attribute to load dynamic content asynchronously, improving load speed and user experience. Learn to update favorite item counts dynamically with Turbo Streams without custom JavaScript, preparing you for integrating more complex client-side interactivity with Stimulus.
We'll cover the following...
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.
Lazy loading in Rails
To make this work, we want an entry in the navigation bar that acts as a placeholder for the favorites ...