Server-rendered skeleton UI for slow frames

3706
0

For slow endpoints, I like a skeleton placeholder rather than a blank area. Turbo Frames make this easy: render a “loading skeleton” inside the frame tag as the initial content, then set src so Turbo fetches the real content. When the response arrives, Turbo swaps in the actual HTML. The skeleton is just HTML/CSS (Tailwind classes) and can match the final layout closely, which reduces perceived latency. This pattern is also nice because it’s purely server-driven: no custom JS required. I use it for dashboards, reports, or “related items” panels. The key is to keep the skeleton lightweight, and to ensure the frame response returns the same frame ID.