fix: enhance image loading animation with cream-colored shimmer

- Match shimmer colors to site's cream/warm palette (#f5f0e8, #e8e4dc)
- Add ease-in-out timing for smoother animation
- Proper z-index layering (shimmer below image)
- Longer fade-in transition (0.4s) for polished feel
This commit is contained in:
2026-06-30 23:38:51 -05:00
parent c98824c8d7
commit 4fb97e1f10
+6 -3
View File
@@ -68,9 +68,10 @@ export default function OptimizedImage({
style={{
position: 'absolute',
inset: 0,
background: 'linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)',
background: 'linear-gradient(90deg, #f5f0e8 25%, #e8e4dc 50%, #f5f0e8 75%)',
backgroundSize: '200% 100%',
animation: 'shimmer 1.5s infinite',
animation: 'shimmer 1.5s ease-in-out infinite',
zIndex: 1,
}}
/>
)}
@@ -107,7 +108,9 @@ export default function OptimizedImage({
height: '100%',
objectFit: 'cover',
opacity: loaded ? 1 : 0,
transition: 'opacity 0.3s ease',
transition: 'opacity 0.4s ease-out',
position: 'relative',
zIndex: 2,
}}
/>
)}