Lazy-hidden `turbo-frame`

Would it be a good idea to have an option for turbo-frame that fires the request only when it becomes visible on the page(maybe with IntersectionObservers)?

Currently, If we want to implement details popup-menu (ala Hey popu-menu), we need a Stimulus controller.

Then we could make details popup without Stimulus:

<details>
   <summary>Menu</summary>
   <%= turbo_frame_tag “menu”, src: …, lazy: true do %>
      ...spinner...
   <% end %>
</details>
2 Likes

Unfortunately this is too simple:

  • The assumption of viewport intersection as the only desirable trigger is incorrect. For example, I use toggle and hover events.

  • The assumption that a turbo-frame is the only consumer for the same trigger is also incorrect. For example, when one drop-down menu opens, I want to close the others.

  • The assumption that we need a separate turbo-frame for each lazy-loaded resource is incorrect. For example, a document preview only needs one frame, but has many sources.

Summary: using a Stimulus controller for event-driven lazy-loading is the ideal implementation, because there are many dimensions to such behaviour. This kind of thing is why both are included in Hotwire, and support for it is already present through the data-turbo-frame attribute.