Lazy-load heavy panels with IntersectionObserver + Turbo frame

12085
0

Not every part of a page needs to load immediately. For heavy panels (analytics charts, audit logs), I use a Turbo Frame with src and a tiny Stimulus controller that sets the src when the element becomes visible via IntersectionObserver. This avoids fetching content for users who never scroll down. Turbo will then fetch the frame’s source and swap in server-rendered HTML. It’s a nice middle ground: you still write Rails views, but you get lazy loading like a modern SPA. The implementation is small and doesn’t require a build system. I also use this pattern for “related items” panels that can be expensive. The biggest win is reduced initial render time and DB load.