Post

Ryan Strickler
@ryanstrickler.com

Just found a nice trick when lazy loading with a turbo frame. I'm working on a page that loads timesheets for a list of employees as you scroll down a long list. When there are no timesheets, I update the frame to be empty, but it was still taking up a little extra space in the layout.

Ryan Strickler
@ryanstrickler.com

Assuming you're using Tailwind, you can use `empty:hidden` in the turbo frame tag where you're making the lazy loading call, like this: <%= turbo_frame_tag dom_id(employee, :timesheets), loading: :lazy, src: employee_timesheets_path(employee), class: "empty:hidden" do %>

0 reposts0 likes

Ryan Strickler
@ryanstrickler.com

Then in your response, just make sure your frame is empty when there is no data: <%= turbo_frame_tag dom_id(@employee, :timesheets) do %> <% if @timesheets.any? %> ... <% end %> <% end %>