From 563d44d0cacb0acd8c5ba6378ca0636d57404270 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Sat, 11 Oct 2025 20:42:56 +0300
Subject: [PATCH] MenuSkeleton: apply 3 fr for desktop size & clean code

---
 .../MenuSkeleton/MenuSkeleton.module.css      | 320 +++++++++---------
 .../components/MenuSkeleton/MenuSkeleton.tsx  |   2 +-
 src/pages/menu/page.tsx                       |   4 +-
 3 files changed, 164 insertions(+), 162 deletions(-)

diff --git a/src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css b/src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css
index 50f3e2f..32100b3 100644
--- a/src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css
+++ b/src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css
@@ -1,3 +1,4 @@
+/* Base Styles */
 .categoriesContainer {
   display: flex;
   -webkit-overflow-scrolling: touch;
@@ -65,77 +66,7 @@
   background-color: var(--background);
 }
 
-/* Enhanced responsive categories container */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .logo {
-    left: 40px;
-    width: 80px;
-    height: 80px;
-  }
-
-  .categoriesContainer {
-    height: 160px;
-    padding: 0 24px;
-    gap: 16px;
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-items: center;
-  }
-
-  .categoriesSticky {
-    padding: 12px 16px !important;
-    height: 70px !important;
-  }
-
-  .leftShape {
-    top: 150px;
-    left: -3px;
-  }
-
-  .rightShape {
-    top: 150px;
-    left: 116px;
-  }
-}
-
-@media (min-width: 1025px) {
-  .logo {
-    left: 33px;
-    top: 141px;
-    width: 150px !important;
-    height: 150px !important;
-  }
-  .categoriesContainer {
-    height: 180px;
-    padding: 0 24px;
-    max-width: 1200px;
-    margin: 0 auto;
-    gap: 16px;
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-items: center;
-  }
-
-  .categoriesSticky {
-    padding: 16px 24px !important;
-    height: 70px !important;
-    max-width: 100vw !important;
-    margin: 0 !important;
-  }
-
-  .leftShape {
-    top: 170px;
-    left: -10px;
-  }
-
-  .rightShape {
-    top: 170px;
-    left: 185px;
-  }
-}
-
+/* Menu Section Styles */
 .menuSection:first-child h3 {
   margin-top: 0px !important;
 }
@@ -145,25 +76,11 @@
   transition: color 0.3s ease;
 }
 
-/* Enhanced responsive menu section headers */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .menuSection h3 {
-    margin: 40px 0px 20px 0px;
-    font-size: 24px;
-  }
-}
-
-@media (min-width: 1025px) {
-  .menuSection h3 {
-    margin: 50px 0px 25px 0px;
-    font-size: 28px;
-  }
-}
-
+/* Menu Items Grid Styles */
 .menuItemsGrid {
   display: grid;
   gap: 12px;
-  grid-template-columns: 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
   margin-bottom: 10px;
 }
 
@@ -185,16 +102,6 @@
   margin-bottom: 24px;
 }
 
-/* Enhanced responsive menu items grid */
-@media (min-width: 1280px) {
-  .menuItemsGridDesktop {
-    grid-template-columns: repeat(3, 1fr);
-    gap: 24px;
-    padding: 0 20px;
-    margin-bottom: 28px;
-  }
-}
-
 /* Restaurant Header Skeleton */
 .restaurantHeader {
   position: relative;
@@ -231,45 +138,6 @@
   gap: 12px;
 }
 
-/* Enhanced responsive page container */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .pageContainer {
-    /* padding: 0 24px; */
-  }
-
-  .restaurantInfoSkeleton {
-    padding: 0 24px;
-  }
-
-  .loyaltySkeleton {
-    padding: 0 24px;
-  }
-
-  .restaurantHeader {
-    margin-bottom: 32px;
-  }
-}
-
-@media (min-width: 1025px) {
-  .pageContainer {
-    /* padding: 32px; */
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-
-  .restaurantInfoSkeleton {
-    padding: 0 32px;
-  }
-
-  .loyaltySkeleton {
-    padding: 0 32px;
-  }
-
-  .restaurantHeader {
-    margin-bottom: 40px;
-  }
-}
-
 /* Skeleton Loading Styles */
 .skeletonContainer {
   animation: skeletonPulse 1.5s ease-in-out infinite;
@@ -321,25 +189,6 @@
   animation: skeletonShimmer 1.5s infinite;
 }
 
-/* Mobile-specific skeleton styles */
-@media (max-width: 768px) {
-  .skeletonContainer .ant-skeleton {
-    margin-bottom: 12px;
-  }
-
-  .skeletonContainer .ant-skeleton-image {
-    border-radius: 4px;
-  }
-
-  .skeletonContainer .ant-skeleton-input {
-    border-radius: 4px;
-  }
-
-  .skeletonContainer .ant-skeleton-button {
-    border-radius: 16px;
-  }
-}
-
 /* Dark theme skeleton styles */
 :global(.darkApp) .skeletonContainer .ant-skeleton-active .ant-skeleton-input,
 :global(.darkApp) .skeletonContainer .ant-skeleton-active .ant-skeleton-image,
@@ -356,12 +205,93 @@
   border-color: #363636;
 }
 
-/* Tablet-specific skeleton styles */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .skeletonContainer {
-    /* padding: 0 24px; */
+/* ===== AGGREGATED MEDIA QUERIES ===== */
+
+/* Mobile Styles (max-width: 768px) */
+@media (max-width: 768px) {
+  .skeletonContainer .ant-skeleton {
+    margin-bottom: 12px;
   }
 
+  .skeletonContainer .ant-skeleton-image {
+    border-radius: 4px;
+  }
+
+  .skeletonContainer .ant-skeleton-input {
+    border-radius: 4px;
+  }
+
+  .skeletonContainer .ant-skeleton-button {
+    border-radius: 16px;
+  }
+
+  .menuItemsGrid {
+    display: grid;
+    gap: 12px;
+    grid-template-columns: 1fr;
+    margin-bottom: 10px;
+  }
+}
+
+/* Tablet Styles (769px - 1024px) */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .logo {
+    left: 40px;
+    width: 80px;
+    height: 80px;
+  }
+
+  .categoriesContainer {
+    height: 160px;
+    padding: 0 24px;
+    gap: 16px;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .categoriesSticky {
+    padding: 12px 16px !important;
+    height: 70px !important;
+  }
+
+  .leftShape {
+    top: 150px;
+    left: -3px;
+  }
+
+  .rightShape {
+    top: 150px;
+    left: 116px;
+  }
+
+  .menuSection h3 {
+    margin: 40px 0px 20px 0px;
+    font-size: 24px;
+  }
+
+  .menuItemsGrid {
+    display: grid;
+    gap: 12px;
+    grid-template-columns: 1fr;
+    margin-bottom: 10px;
+  }
+
+
+  .restaurantInfoSkeleton {
+    padding: 0 24px;
+  }
+
+  .loyaltySkeleton {
+    padding: 0 24px;
+  }
+
+  .restaurantHeader {
+    margin-bottom: 32px;
+  }
+
+
   .skeletonContainer .ant-skeleton {
     margin-bottom: 16px;
   }
@@ -378,3 +308,75 @@
     border-radius: 18px;
   }
 }
+
+/* Desktop Styles (min-width: 1025px) */
+@media (min-width: 1025px) {
+  .logo {
+    left: 33px;
+    top: 141px;
+    width: 150px !important;
+    height: 150px !important;
+  }
+
+  .categoriesContainer {
+    height: 180px;
+    padding: 0 24px;
+    max-width: 1200px;
+    margin: 0 auto;
+    gap: 16px;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .categoriesSticky {
+    padding: 16px 24px !important;
+    height: 70px !important;
+    max-width: 100vw !important;
+    margin: 0 !important;
+  }
+
+  .leftShape {
+    top: 170px;
+    left: -10px;
+  }
+
+  .rightShape {
+    top: 170px;
+    left: 185px;
+  }
+
+  .menuSection h3 {
+    margin: 50px 0px 25px 0px;
+    font-size: 28px;
+  }
+
+  .pageContainer {
+    /* padding: 32px; */
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .restaurantInfoSkeleton {
+    padding: 0 32px;
+  }
+
+  .loyaltySkeleton {
+    padding: 0 32px;
+  }
+
+  .restaurantHeader {
+    margin-bottom: 40px;
+  }
+}
+
+/* Large Desktop Styles (min-width: 1280px) */
+@media (min-width: 1280px) {
+  .menuItemsGridDesktop {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+    padding: 0 20px;
+    margin-bottom: 28px;
+  }
+}
diff --git a/src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx b/src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx
index 90f8b01..2df183e 100644
--- a/src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx
+++ b/src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx
@@ -341,7 +341,7 @@ const MenuSkeleton = ({
               </div> */}
 
                   <div
-                    className={`${styles.menuItemsGrid} ${styles.menuItemsGrid}`}
+                    className={`${styles.menuItemsGrid}`}
                   >
                     {Array.from({
                       length:
diff --git a/src/pages/menu/page.tsx b/src/pages/menu/page.tsx
index f35288c..e88660b 100644
--- a/src/pages/menu/page.tsx
+++ b/src/pages/menu/page.tsx
@@ -56,8 +56,8 @@ function MenuPage() {
         orderType={orderType || ""}
       />
 
-      {isLoading ? (
-        <MenuSkeleton categoryCount={10} itemCount={8} variant="default" />
+      {!isLoading ? (
+        <MenuSkeleton categoryCount={10} itemCount={30} variant="default" />
       ) : (
         <div className={styles.menuContainer}>
           <div className={styles.restaurantHeader}>