0

At the bottom of a long web page (i.e. in a view template, say long_page.html.erb) I've some heavy content that slows down page loading.

Because this heavy content is placed at the bottom of the page and because users do not always scroll to the bottom of the page, I thought to use a lazy-loaded <turbo-frame> so that the heavy content is loaded only when the user scroll the page at the bottom, which obviously improves the overall loading performance of the page.

How can I make that within the same view template with proper <turbo-frame> settings, which would avoid me creating new controller actions and new view templates?

At the bottom of the long web page I tried to add something like this:

# long_page.html.erb

<turbo-frame id="heavy_content_inside" loading="lazy" src="path/to/long_page">
                                                           ^^^^^^^^^^^^^^^^^
  <% # heavy computed content that slows down page loading %>

</turbo-frame>

but I'm getting the error in console:

Error: Matching element has a source URL which references itself

Backo
  • 18,291
  • 27
  • 103
  • 170

1 Answers1

0
# long_page.html.erb

# ...

<% if params[:lazy_loading] %>
  <turbo-frame id="heavy_content_inside">
    <% # heavy computed content that slows down page loading %>
  </turbo-frame>
<% else %>
  <turbo-frame id="heavy_content_inside" loading="lazy" src="path/to/long_page?lazy_loading=true"></turbo-frame>
<% end %>
Backo
  • 18,291
  • 27
  • 103
  • 170
  • This kind of defeats the whole point which is to break up a slow loading page into separate components that are processed separatately in the back end. While you're not adding additional controllers (this is not actually a bad thing) you're adding extra cyclic complexity to your existing controller which is in no way better. – max Apr 28 '23 at 11:16
  • Decomposition is to decompose slow and complex logic into smaller parts. Making your methods now do two different things doesn't do that. – max Apr 28 '23 at 11:21
  • I am aware of it, and I thank you for the clarification. The fact is that avoiding running heavy requests (such as in my case) reduces both the overall page loading time (improves UX) and the server load. And you get this by just changing the view (existing controller remains the same). At the end, adding a bit of complexity is inevitable; you can't have it all. – Backo Apr 28 '23 at 21:55
  • Yeah but you can handle it better if you stick to the SRP and good coding practices. – max Apr 29 '23 at 09:58
  • How do handle it better, for example? – Backo Apr 29 '23 at 12:14
  • Have your methods focus on doing one thing. – max Apr 29 '23 at 17:23