From 11d8f4a45685ddd2fead9f8eeea4d4647c4e600e Mon Sep 17 00:00:00 2001
From: muken <jmendoza14@pm.me>
Date: Sun, 28 Jun 2026 23:45:40 -0500
Subject: [PATCH] feat: add shimmer loading animation to rooms page

---
 src/app/rooms/page.tsx | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/app/rooms/page.tsx b/src/app/rooms/page.tsx
index 7dae44d..b327a17 100644
--- a/src/app/rooms/page.tsx
+++ b/src/app/rooms/page.tsx
@@ -154,7 +154,27 @@ export default function RoomsPage() {
         Comfortable stays with views of the vineyard and cloud forest.
       </p>
 
-      {loading && <p style={{ color: warm }}>Loading rooms...</p>}
+      {loading && (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(380px, 1fr))', gap: '2rem' }}>
+          {[1, 2, 3].map((i) => (
+            <div key={i} style={{ background: cream, borderRadius: '20px', overflow: 'hidden', boxShadow: '0 2px 8px rgba(1,13,30,0.08)' }}>
+              <div style={{ width: '100%', height: '300px', background: 'linear-gradient(90deg, #e8e4dc 25%, #f5f0e8 50%, #e8e4dc 75%)', backgroundSize: '200% 100%', animation: 'shimmer 1.5s infinite' }} />
+              <div style={{ padding: '1.5rem' }}>
+                <div style={{ height: '24px', width: '60%', background: 'linear-gradient(90deg, #e8e4dc 25%, #f5f0e8 50%, #e8e4dc 75%)', backgroundSize: '200% 100%', animation: 'shimmer 1.5s infinite', borderRadius: '4px', marginBottom: '0.75rem' }} />
+                <div style={{ height: '16px', width: '90%', background: 'linear-gradient(90deg, #e8e4dc 25%, #f5f0e8 50%, #e8e4dc 75%)', backgroundSize: '200% 100%', animation: 'shimmer 1.5s infinite', borderRadius: '4px', marginBottom: '0.5rem' }} />
+                <div style={{ height: '16px', width: '75%', background: 'linear-gradient(90deg, #e8e4dc 25%, #f5f0e8 50%, #e8e4dc 75%)', backgroundSize: '200% 100%', animation: 'shimmer 1.5s infinite', borderRadius: '4px', marginBottom: '0.5rem' }} />
+                <div style={{ height: '16px', width: '50%', background: 'linear-gradient(90deg, #e8e4dc 25%, #f5f0e8 50%, #e8e4dc 75%)', backgroundSize: '200% 100%', animation: 'shimmer 1.5s infinite', borderRadius: '4px' }} />
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+      <style jsx>{`
+        @keyframes shimmer {
+          0% { background-position: 200% 0; }
+          100% { background-position: -200% 0; }
+        }
+      `}</style>
       {error && <p style={{ color: '#c23b22' }}>{error}</p>}
       {!loading && displayedRooms.length === 0 && <p style={{ color: '#777' }}>No rooms available yet.</p>}