Visual loading states for Turbo Frames with CSS only
2 hours ago
- #UX Design
- #Turbo Frames
- #Rails Icons
- Turbo Frames can show an initial loading state like 'Loading…' which gets replaced once content loads.
- For permanent Turbo Frame elements (e.g., modals), immediate feedback is crucial for better UX.
- Default behavior shows no feedback until content loads, leading to poor user experience.
- CSS-only loading indicators can use the `aria-busy='true'` attribute to show loading states.
- A pseudo-element overlay with 'Loading…' text can be styled to appear during loading.
- SVG spinners can replace text loaders for a more visually appealing indicator.
- Rails Icons can be used with CSS Custom Properties for cleaner SVG integration.
- Inline styles and Base64 encoding can pass icon data from the view to CSS.