• สร้าง controller เพื่อใช้ตรวจสอบว่าส่วนแสดงผลปรากฏขึ้นมาแล้วหรือยังด้วย Intersection Observer และทันทีที่ปรากฏก็สั่งให้ Turbo Frame ทำการโหลดข้อมูลจาก src ที่ได้กำหนดไว้

# hyper_controller.js
import { Controller } from "stimulus"
# AppearanceObserver from https://github.com/hotwired/turbo-rails/blob/ba86832f7f13001793ab917185788df9723666e8/app/assets/javascripts/turbo.js#L436
import { AppearanceObserver } from "../helpers"

export default class extends Controller {  
  static values = { src: String }
  initialize () {    
    this.connected = false    
    this.appearanceObserver = new AppearanceObserver(this, this.element)  
  }
  
  connect () {    
    if (!this.connected) { 
      this.connected = true      
      this.appearanceObserver.start()    
    }  
  }    

  disconnect () {    
    if (this.connected) {      
      this.appearanceObserver.stop()    
    }  
  }
  
  elementAppearedInViewport(element) {    
    this.loadSourceURL()  
  }

  loadSourceURL() {    
    this.element.src = this.srcValue       
    this.appearanceObserver.stop()  
  }
}

• จำลองส่วนการแสดงข้อมูลเอาไว้ และกำหนด controller ข้างต้นเข้าไปใน Turbo Frame

# demo.html.erb
  
<% 10.times.each do |index| %>    
  <div class="py-10">      
    <%= turbo_frame_tag "graph_#{index}", data: { controller: "hyper", "hyper-src-value": snippet_path(id: index) } do %>        
      <div class="border border-blue-300 shadow rounded-md p-4 max-w-sm w-full mx-auto">          
        ...
      </div>
    <% end %>   
  </div>  
<% end %>

ผลลัพธ์ที่ได้ก็จะเป็นดังแสดงในรูปด้านล่าง จะเห็นได้ว่าข้อมูลจะค่อยๆ ทยอยแสดงขึ้นทีละส่วนตามที่ต้องการ

ทั้งนี้ทั้งนั้น สิ่งที่ทำมาทั้งหมดจริงๆ แล้ว Turbo Frame ของเรารองรับการแสดงข้อมูลแบบ Lazy Loading อยู่แล้ว ไม่จำเป็นต้องใช้ Stimulus เข้ามาช่วยแต่อย่างใด เพียงแค่เราระบุ src และ loading เป็น lazy เท่านั้นเอง

# demo.html.erb

...
<%= turbo_frame_tag "graph_#{index}", src: snippet_path(id: index), loading: "lazy" do %>
...