MenuSkeleton: fix desktop size

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 {

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, isTablet } = useBreakPoint();
-  const isMobile = xs;
-  const isTablet = !xs && !md;
-  // const isDesktop = md;
 
   const getCategoryCardStyle = () => {
     if (isMobile) {
@@ -106,40 +102,30 @@ 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",
+            left: isMobile ? "33px" : isTablet ? "40px" : "36px",
-            top: isMobile ? "133px" : isTablet ? "170px" : "170px",
+            top: isMobile ? "133px" : isTablet ? "150px" : "130px",
             borderRadius: "50%",
-            width: isMobile ? "72px" : isTablet ? "80px" : "80px",
+            width: isMobile ? "72px" : isTablet ? "80px" : "150px",
-            height: isMobile ? "72px" : isTablet ? "80px" : "80px",
+            height: isMobile ? "72px" : isTablet ? "80px" : "150px",
             border: "3px solid var(--background)",
             zIndex: 10,
             overflow: "hidden",
@@ -150,7 +136,7 @@ const MenuSkeleton = ({
         <div className={styles.leftShape}></div>
         <div className={styles.rightShape}></div>
       </div>
-
+      <div className={`${styles.pageContainer} ${styles.skeletonContainer}`}>
         {/* Restaurant Info Skeleton */}
         <div className={styles.restaurantInfoSkeleton}>
           <div
@@ -181,7 +167,9 @@ const MenuSkeleton = ({
                 marginBottom: "0.5rem",
               }}
             >
-            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+              <div
+                style={{ display: "flex", alignItems: "center", gap: "8px" }}
+              >
                 <Skeleton.Image
                   active
                   style={{
@@ -349,7 +337,9 @@ const MenuSkeleton = ({
                 />
               </div> */}
 
-                <div className={`${styles.menuItemsGrid} ${getGridClass()}`}>
+                  <div
+                    className={`${styles.menuItemsGrid} ${styles.menuItemsGrid}`}
+                  >
                     {Array.from({
                       length:
                         variant === "minimal"
@@ -416,11 +406,12 @@ const MenuSkeleton = ({
                     ))}
                   </div>
                 </div>
-            )
+              ),
             )}
           </div>
         )}
       </div>
+    </>
   );
 };