From b385d409134eff12585548832e9385fd20f689ff Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Mon, 6 Oct 2025 01:44:09 +0300
Subject: [PATCH] MenuSkeleton: fix desktop size

---
 .../MenuSkeleton/MenuSkeleton.module.css      |  44 +-
 .../components/MenuSkeleton/MenuSkeleton.tsx  | 459 +++++++++---------
 2 files changed, 267 insertions(+), 236 deletions(-)

diff --git a/src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css b/src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css
index e50b2e4..50f3e2f 100644
--- a/src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css
+++ b/src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css
@@ -18,6 +18,24 @@
   gap: 16px;
 }
 
+.cover {
+  width: 100%;
+  height: "auto";
+  object-fit: cover;
+}
+
+.logo {
+  position: absolute;
+  left: 33px;
+  top: -64px;
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  border: 3px solid var(--background);
+  z-index: 10;
+  overflow: hidden;
+}
+
 .leftShape {
   position: absolute;
   top: 133px;
@@ -49,6 +67,12 @@
 
 /* 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;
@@ -65,17 +89,23 @@
   }
 
   .leftShape {
-    top: 170px;
+    top: 150px;
     left: -3px;
   }
 
   .rightShape {
-    top: 170px;
+    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;
@@ -94,6 +124,16 @@
     max-width: 100vw !important;
     margin: 0 !important;
   }
+
+  .leftShape {
+    top: 170px;
+    left: -10px;
+  }
+
+  .rightShape {
+    top: 170px;
+    left: 185px;
+  }
 }
 
 .menuSection:first-child h3 {
diff --git a/src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx b/src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx
index 951ed6d..b514d7f 100644
--- a/src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx
+++ b/src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx
@@ -1,4 +1,5 @@
-import { Card, Grid, Skeleton } from "antd";
+import { Card, Skeleton } from "antd";
+import useBreakPoint from "hooks/useBreakPoint";
 import styles from "./MenuSkeleton.module.css";
 
 interface MenuSkeletonProps {
@@ -12,17 +13,12 @@ interface MenuSkeletonProps {
     | "menu-only";
 }
 
-const { useBreakpoint } = Grid;
-
 const MenuSkeleton = ({
-  categoryCount = 6,
+  categoryCount = 8,
   itemCount = 8,
   variant = "default",
 }: MenuSkeletonProps) => {
-  const { xs, md } = useBreakpoint();
-  const isMobile = xs;
-  const isTablet = !xs && !md;
-  // const isDesktop = md;
+  const { isMobile, isTablet } = useBreakPoint();
 
   const getCategoryCardStyle = () => {
     if (isMobile) {
@@ -106,82 +102,90 @@ const MenuSkeleton = ({
     }
   };
 
-  const getGridClass = () => {
-    if (isMobile) {
-      return styles.menuItemsGridMobile;
-    } else if (isTablet) {
-      return styles.menuItemsGridTablet;
-    } else {
-      return styles.menuItemsGridDesktop;
-    }
-  };
-
   return (
-    <div className={`${styles.pageContainer} ${styles.skeletonContainer}`}>
+    <>
       {/* Restaurant Header Skeleton */}
       <div className={styles.restaurantHeader}>
         {/* Cover Image Skeleton */}
         <Skeleton.Image
           active
+          className={styles.cover}
           style={{
             width: "100vw",
             height: isMobile ? 182 : isTablet ? 200 : 220,
             borderRadius: 0,
           }}
         />
-
         {/* Logo Skeleton */}
         <Skeleton.Image
           active
           style={{
             position: "absolute",
-            left: isMobile ? "33px" : "40px",
-            top: isMobile ? "133px" : isTablet ? "170px" : "170px",
+            left: isMobile ? "33px" : isTablet ? "40px" : "36px",
+            top: isMobile ? "133px" : isTablet ? "150px" : "130px",
             borderRadius: "50%",
-            width: isMobile ? "72px" : isTablet ? "80px" : "80px",
-            height: isMobile ? "72px" : isTablet ? "80px" : "80px",
+            width: isMobile ? "72px" : isTablet ? "80px" : "150px",
+            height: isMobile ? "72px" : isTablet ? "80px" : "150px",
             border: "3px solid var(--background)",
             zIndex: 10,
             overflow: "hidden",
           }}
         />
 
-        {/* Decorative Shapes Skeleton */}
+        {/* Decorative Shap es Skeleton */}
         <div className={styles.leftShape}></div>
         <div className={styles.rightShape}></div>
       </div>
-
-      {/* Restaurant Info Skeleton */}
-      <div className={styles.restaurantInfoSkeleton}>
-        <div
-          className={
-            styles.restaurantDescriptionSkeleton +
-            " " +
-            "restaurant-description-skeleton"
-          }
-        >
-          <Skeleton
-            active
-            paragraph={{
-              rows: 1,
-              width: ["100%"],
-            }}
-          />
-        </div>
-      </div>
-
-      {/* Loyalty Card Skeleton */}
-      <div className={styles.loyaltySkeleton}>
-        <Card className={styles.loyaltyCardSkeleton}>
+      <div className={`${styles.pageContainer} ${styles.skeletonContainer}`}>
+        {/* Restaurant Info Skeleton */}
+        <div className={styles.restaurantInfoSkeleton}>
           <div
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center",
-              marginBottom: "0.5rem",
-            }}
+            className={
+              styles.restaurantDescriptionSkeleton +
+              " " +
+              "restaurant-description-skeleton"
+            }
           >
-            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+            <Skeleton
+              active
+              paragraph={{
+                rows: 1,
+                width: ["100%"],
+              }}
+            />
+          </div>
+        </div>
+
+        {/* Loyalty Card Skeleton */}
+        <div className={styles.loyaltySkeleton}>
+          <Card className={styles.loyaltyCardSkeleton}>
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                marginBottom: "0.5rem",
+              }}
+            >
+              <div
+                style={{ display: "flex", alignItems: "center", gap: "8px" }}
+              >
+                <Skeleton.Image
+                  active
+                  style={{
+                    width: "24px",
+                    height: "24px",
+                    borderRadius: "4px",
+                  }}
+                />
+                <Skeleton.Input
+                  active
+                  style={{
+                    width: "120px",
+                    height: "16px",
+                  }}
+                />
+              </div>
               <Skeleton.Image
                 active
                 style={{
@@ -190,150 +194,134 @@ const MenuSkeleton = ({
                   borderRadius: "4px",
                 }}
               />
-              <Skeleton.Input
+            </div>
+            <br />
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+              }}
+            >
+              <div style={{ display: "flex", gap: "4px" }}>
+                {Array.from({ length: 5 }).map((_, index) => (
+                  <Skeleton.Image
+                    key={index}
+                    active
+                    style={{
+                      width: "32px",
+                      height: "32px",
+                      borderRadius: "50%",
+                    }}
+                  />
+                ))}
+              </div>
+              <Skeleton.Button
                 active
                 style={{
-                  width: "120px",
-                  height: "16px",
+                  width: "80px",
+                  height: "32px",
+                  borderRadius: "16px",
                 }}
               />
             </div>
-            <Skeleton.Image
-              active
-              style={{
-                width: "24px",
-                height: "24px",
-                borderRadius: "4px",
-              }}
-            />
-          </div>
-          <br />
+          </Card>
+        </div>
+
+        {/* Categories Skeleton */}
+        {(variant === "default" ||
+          variant === "minimal" ||
+          variant === "detailed" ||
+          variant === "categories-only") && (
           <div
             style={{
+              padding: isMobile ? "0 1rem" : isTablet ? "0 24px" : "0 24px",
               display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center",
+              gap: 8,
+              overflow: "hidden",
+              marginBottom: isMobile ? "4rem" : isTablet ? "8px" : "16px",
             }}
           >
-            <div style={{ display: "flex", gap: "4px" }}>
-              {Array.from({ length: 5 }).map((_, index) => (
-                <Skeleton.Image
-                  key={index}
-                  active
-                  style={{
-                    width: "32px",
-                    height: "32px",
-                    borderRadius: "50%",
-                  }}
-                />
-              ))}
-            </div>
-            <Skeleton.Button
-              active
-              style={{
-                width: "80px",
-                height: "32px",
-                borderRadius: "16px",
-              }}
-            />
-          </div>
-        </Card>
-      </div>
-
-      {/* Categories Skeleton */}
-      {(variant === "default" ||
-        variant === "minimal" ||
-        variant === "detailed" ||
-        variant === "categories-only") && (
-        <div
-          style={{
-            padding: isMobile ? "0 1rem" : isTablet ? "0 24px" : "0 24px",
-            display: "flex",
-            gap: 8,
-            overflow: "hidden",
-            marginBottom: isMobile ? "4rem" : isTablet ? "8px" : "16px",
-          }}
-        >
-          {Array.from({
-            length:
-              variant === "minimal"
-                ? Math.min(categoryCount, 4)
-                : categoryCount,
-          }).map((_, index) => (
-            <div
-              key={index}
-              style={{
-                marginRight: isMobile ? "3px" : "8px",
-              }}
-            >
-              <Card
-                style={{ borderRadius: 8 }}
-                styles={{
-                  body: {
-                    ...getCategoryCardStyle(),
-                    padding: 0,
-                  },
+            {Array.from({
+              length:
+                variant === "minimal"
+                  ? Math.min(categoryCount, 4)
+                  : categoryCount,
+            }).map((_, index) => (
+              <div
+                key={index}
+                style={{
+                  marginRight: isMobile ? "3px" : "8px",
                 }}
               >
-                <div
-                  style={{
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    gap: "0px",
-                    width: "100%",
-                    height: "100%",
+                <Card
+                  style={{ borderRadius: 8 }}
+                  styles={{
+                    body: {
+                      ...getCategoryCardStyle(),
+                      padding: 0,
+                    },
                   }}
                 >
-                  <Skeleton.Image
-                    active
-                    style={{
-                      ...getCategoryImageStyle(),
-                      borderBottomLeftRadius: 0,
-                      borderBottomRightRadius: 0,
-                    }}
-                  />
                   <div
                     style={{
-                      flex: 1,
-                      padding: isMobile ? "4px" : "8px",
-                      textAlign: "center",
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      gap: "0px",
                       width: "100%",
+                      height: "100%",
                     }}
                   >
-                    <Skeleton
+                    <Skeleton.Image
                       active
-                      paragraph={{ rows: 0 }}
                       style={{
-                        margin: 0,
-                        padding: isMobile ? 3 : 8,
+                        ...getCategoryImageStyle(),
+                        borderBottomLeftRadius: 0,
+                        borderBottomRightRadius: 0,
                       }}
                     />
+                    <div
+                      style={{
+                        flex: 1,
+                        padding: isMobile ? "4px" : "8px",
+                        textAlign: "center",
+                        width: "100%",
+                      }}
+                    >
+                      <Skeleton
+                        active
+                        paragraph={{ rows: 0 }}
+                        style={{
+                          margin: 0,
+                          padding: isMobile ? 3 : 8,
+                        }}
+                      />
+                    </div>
                   </div>
-                </div>
-              </Card>
-            </div>
-          ))}
-        </div>
-      )}
+                </Card>
+              </div>
+            ))}
+          </div>
+        )}
 
-      {/* Menu Items Skeleton */}
-      {(variant === "default" ||
-        variant === "minimal" ||
-        variant === "detailed" ||
-        variant === "menu-only") && (
-        <div
-          className={styles.menuSections}
-          style={{
-            padding: isMobile ? "0 1rem" : isTablet ? "0 24px" : "0 24px",
-          }}
-        >
-          {Array.from({ length: variant === "minimal" ? 1 : 3 }).map(
-            (_, sectionIndex) => (
-              <div key={sectionIndex} className={styles.menuSection}>
-                {/* Section Header Skeleton */}
-                {/* <div
+        {/* Menu Items Skeleton */}
+        {(variant === "default" ||
+          variant === "minimal" ||
+          variant === "detailed" ||
+          variant === "menu-only") && (
+          <div
+            className={styles.menuSections}
+            style={{
+              padding: isMobile ? "0 1rem" : isTablet ? "0 24px" : "0 24px",
+            }}
+          >
+            {Array.from({ length: variant === "minimal" ? 1 : 3 }).map(
+              (_, sectionIndex) => (
+                <div key={sectionIndex} className={styles.menuSection}>
+                  {/* Section Header Skeleton */}
+                  {/* <div
                 style={{
                   margin: isMobile ? "20px 0 15px 0" : isTablet ? "30px 0 20px 0" : "40px 0 25px 0",
                   padding: isTablet ? "0 12px" : isDesktop ? "0 16px" : "0"
@@ -349,78 +337,81 @@ const MenuSkeleton = ({
                 />
               </div> */}
 
-                <div className={`${styles.menuItemsGrid} ${getGridClass()}`}>
-                  {Array.from({
-                    length:
-                      variant === "minimal"
-                        ? Math.min(itemCount, 4)
-                        : itemCount,
-                  }).map((_, itemIndex) => (
-                    <Card
-                      key={itemIndex}
-                      className="responsive-card"
-                      style={{ borderRadius: 8 }}
-                      styles={{
-                        body: {
-                          ...getMenuItemCardStyle(),
-                          display: "flex",
-                          flexDirection: "column",
-                          justifyContent: "space-between",
-                        },
-                      }}
-                    >
-                      <div
-                        style={{
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "space-around",
-                          gap: isMobile ? 12 : 16,
-                          position: "relative",
+                  <div
+                    className={`${styles.menuItemsGrid} ${styles.menuItemsGrid}`}
+                  >
+                    {Array.from({
+                      length:
+                        variant === "minimal"
+                          ? Math.min(itemCount, 4)
+                          : itemCount,
+                    }).map((_, itemIndex) => (
+                      <Card
+                        key={itemIndex}
+                        className="responsive-card"
+                        style={{ borderRadius: 8 }}
+                        styles={{
+                          body: {
+                            ...getMenuItemCardStyle(),
+                            display: "flex",
+                            flexDirection: "column",
+                            justifyContent: "space-between",
+                          },
                         }}
                       >
                         <div
                           style={{
-                            lineHeight: 1,
-                            height: "100%",
-                            flex: 1,
                             display: "flex",
-                            flexDirection: "column",
-                            justifyContent: "center",
+                            alignItems: "center",
+                            justifyContent: "space-around",
+                            gap: isMobile ? 12 : 16,
+                            position: "relative",
                           }}
                         >
-                          {/* Item Description Skeleton */}
-                          <Skeleton
-                            active
-                            paragraph={{
-                              rows: isMobile ? 1 : 2,
-                              width: ["100%", "90%", "70%"],
-                            }}
+                          <div
                             style={{
-                              marginBottom: isMobile ? 8 : isTablet ? 16 : 20,
+                              lineHeight: 1,
+                              height: "100%",
+                              flex: 1,
+                              display: "flex",
+                              flexDirection: "column",
+                              justifyContent: "center",
                             }}
-                          />
-                          {/* Action Icons Skeleton */}
-                        </div>
+                          >
+                            {/* Item Description Skeleton */}
+                            <Skeleton
+                              active
+                              paragraph={{
+                                rows: isMobile ? 1 : 2,
+                                width: ["100%", "90%", "70%"],
+                              }}
+                              style={{
+                                marginBottom: isMobile ? 8 : isTablet ? 16 : 20,
+                              }}
+                            />
+                            {/* Action Icons Skeleton */}
+                          </div>
 
-                        <div style={{ position: "relative" }}>
-                          {/* Item Image Skeleton */}
-                          <Skeleton.Image
-                            active
-                            style={{
-                              ...getMenuItemImageStyle(),
-                            }}
-                          />{" "}
+                          <div style={{ position: "relative" }}>
+                            {/* Item Image Skeleton */}
+                            <Skeleton.Image
+                              active
+                              style={{
+                                ...getMenuItemImageStyle(),
+                              }}
+                            />{" "}
+                          </div>
                         </div>
-                      </div>
-                    </Card>
-                  ))}
+                      </Card>
+                    ))}
+                  </div>
                 </div>
-              </div>
-            )
-          )}
-        </div>
-      )}
-    </div>
+              ),
+            )}
+          </div>
+        )}
+      </div>
+    </>
   );
 };