From 4fb97e1f1039ae3f12aea9e035ad09dfaed26448 Mon Sep 17 00:00:00 2001
From: muken <jmendoza14@pm.me>
Date: Tue, 30 Jun 2026 23:38:51 -0500
Subject: [PATCH] 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
---
 src/components/OptimizedImage.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/OptimizedImage.tsx b/src/components/OptimizedImage.tsx
index bbf04f8..bf99ca0 100644
--- a/src/components/OptimizedImage.tsx
+++ b/src/components/OptimizedImage.tsx
@@ -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,
           }}
         />
       )}