erb ruby 39 lines · 3 tabs

Lazy-loading Turbo Frames for performance

Jordan Lee Jan 2026

3 tabs

<article class="post">
  <h1><%= @post.title %></h1>
  <%= simple_format @post.body %>

  <!-- Lazy load comments when scrolled into view -->
  <%= turbo_frame_tag "post_#{@post.id}_comments",
      src: post_comments_path(@post),
      loading: :lazy do %>
    <div class="text-center py-8">
      <div class="spinner"></div>
      <p class="text-gray-500">Loading comments...</p>
    </div>
  <% end %>

  <!-- Lazy load related posts -->
  <%= turbo_frame_tag "related_posts",
      src: related_posts_path(@post),
      loading: :lazy do %>
    <div class="h-64 bg-gray-100 animate-pulse"></div>
  <% end %>
</article>

class CommentsController < ApplicationController
  def index
    @post = Post.find(params[:post_id])
    @comments = @post.comments.includes(:author).order(created_at: :desc)

    # Return just the frame content, no layout
    render layout: false
  end
end

<%= turbo_frame_tag "post_#{@post.id}_comments" do %>
  <div class="comments">
    <h2 class="text-xl font-bold mb-4"><%= @comments.count %> Comments</h2>

    <div class="space-y-4">
      <%= render @comments %>
    </div>
  </div>
<% end %>

3 files · erb, ruby Explain with highlit

Loading everything on initial page render slows perceived performance. Lazy-loaded Turbo Frames defer expensive content until it's needed, keeping initial page loads fast. Setting loading='lazy' with a src attribute tells Turbo to fetch content when the frame enters the viewport. I use this for comment sections, user activity feeds, or related content that's below the fold. The server endpoint returns just the frame content, not the full page layout. Users on slow connections get the critical content first, then secondary content streams in as they scroll. The pattern also works for click-to-reveal scenarios where loading='lazy' is omitted but src is still provided.

Related snips

ruby

class CommentsController < ApplicationController
  before_action :set_post

  def create
    @comment = @post.comments.build(comment_params)

System test: asserting Turbo Stream responses

rails hotwire turbo

by codesnips 4 tabs

ruby

class Post < ApplicationRecord
  belongs_to :author, class_name: 'User'
  has_many :comments, dependent: :destroy

  scope :published, -> { where.not(published_at: nil).where('published_at <= ?', Time.current) }
  scope :draft, -> { where(published_at: nil) }

ActiveRecord scopes for reusable query logic

rails activerecord patterns

by Alex Kumar 1 tab

ruby

module Api
  module V1
    class UsersController < BaseController
      def show
        user = User.includes(:profile).find(params[:id])

ETags for conditional requests and caching

rails caching http-caching

by Alex Kumar 1 tab

ruby

class PostsController < ApplicationController
  def index
    @posts = Post.includes(:author)
                 .order(created_at: :desc)
                 .page(params[:page])
                 .per(10)

Turbo Frames: infinite scroll with lazy-loading frame

rails turbo hotwire

by codesnips 4 tabs

ruby

require "csv"

class PeopleCsvStream
  include Enumerable

  HEADERS = %w[id full_name email signed_up_at plan].freeze

Resilient CSV Export as a Streamed Response

rails performance streaming

by codesnips 3 tabs

erb

<form data-controller="query-sync" data-action="change->query-sync#apply">
  <select name="status" class="rounded border p-2">
    <option value="">Any</option>
    <option value="open">Open</option>
    <option value="closed">Closed</option>
  </select>

Filter UI that syncs query params via Stimulus (no front-end router)

rails hotwire stimulus

by Henry Kim 2 tabs

Share this code

Here's the card — post it anywhere.

Link copied