Eager-loaded frame

Works like the basic frame, but the content is loaded from a remote src first.

• Let’s modify the turbo-frame tag around Contract card with the path to its source src

  <turbo-frame id="contract_<%=contract.id%>" src="/contracts/<%=contract.id%>">
    Content will be replaced when /contracts/:id has been loaded.
  </turbo-frame>
  

• Loads its content as soon as possible (usually as soon as the page is loaded). Use it for important elements that need to be displayed immediately 🚧 🚧

Lazy-loaded frame

Like an eager-loaded frame, but the content is not loaded from src until the frame is visible.

<turbo-frame id="contract_<%=contract.id%>" src="/contracts/<%=contract.id%>"
loading="lazy">
  Content will be replaced when the frame becomes visible and /contracts/:id has been loaded.
</turbo-frame>

Loads its content only when the element becomes visible on the screen. This is ideal for improving performance by delaying the loading of non-essential content until it is actually needed.