 juanatsap
|
c1f2f89555
|
feat: add skeleton shimmer effect during language transitions
Implements smooth skeleton loader animations during language switching:
- Uses HTMX's built-in .htmx-swapping class (no hyperscript needed)
- Content fades to 30% opacity during swap
- Shimmer animation overlays content during transition
- Respects prefers-reduced-motion accessibility setting
- Total transition: 500ms (250ms fade-out + 250ms fade-in)
Implementation approach:
- Simple CSS-only solution using ::before pseudo-element
- No overlay div - skeleton appears INSIDE content wrappers
- Works automatically with HTMX swap timing already configured
- GPU-accelerated shimmer animation (background-position)
Files changed:
- static/css/skeleton.css (NEW) - Shimmer animation styles
- templates/index.html - Added skeleton.css reference
|
2025-11-18 08:22:30 +00:00 |
|