From 6dc2e006929d149971e1dac0474304a00825a72e Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sat, 14 Feb 2026 12:25:40 +0330
Subject: [PATCH] skeleton with custom view

---
 .../[name]/(Main)/components/MenuSkeleton.tsx | 61 +++++++++++++------
 src/app/[name]/(Main)/page.tsx                |  2 +-
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/app/[name]/(Main)/components/MenuSkeleton.tsx b/src/app/[name]/(Main)/components/MenuSkeleton.tsx
index 1c81441..19dfb2a 100644
--- a/src/app/[name]/(Main)/components/MenuSkeleton.tsx
+++ b/src/app/[name]/(Main)/components/MenuSkeleton.tsx
@@ -3,8 +3,13 @@
 import { Skeleton } from "@/components/ui/skeleton";
 import VerticalScrollView from "@/components/listview/VerticalScrollView";
 import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
+import type { MenuItemViewMode } from "@/components/listview/MenuItem";
 
-const MenuSkeleton = () => {
+interface MenuSkeletonProps {
+  viewMode?: MenuItemViewMode;
+}
+
+const MenuSkeleton = ({ viewMode = 'list' }: MenuSkeletonProps) => {
   return (
     <div className="flex flex-col gap-4 items-center pt-8 mb-8">
       <div className="w-full">
@@ -26,26 +31,46 @@ const MenuSkeleton = () => {
         </div>
 
         <VerticalScrollView className="mt-5! overflow-y-auto h-full">
-          {[...Array(6)].map((_, index) => (
-            <MenuItemRenderer key={index}>
-              <div className="flex gap-4 w-full h-full items-center">
-                <Skeleton className="min-w-28 w-28 h-28 rounded-xl" />
-                <div className="w-full inline-flex flex-col justify-between">
-                  <div>
-                    <Skeleton className="h-5 w-32 rounded-md mb-2" />
-                    <Skeleton className="h-4 w-full rounded-md mb-1" />
-                    <Skeleton className="h-4 w-3/4 rounded-md" />
-                  </div>
-                  <div className="inline-flex mt-2 gap-2 justify-between w-full items-center">
-                    <div className="w-full flex flex-col gap-1">
-                      <Skeleton className="h-4 w-16 rounded-md" />
+          {viewMode === 'grid' ? (
+            <div className="grid grid-cols-2 gap-3">
+              {[...Array(6)].map((_, index) => (
+                <MenuItemRenderer key={index} variant="grid">
+                  <div className="flex flex-col w-full h-full">
+                    <Skeleton className="rounded-xl aspect-square max-h-[100px] w-full" />
+                    <div className="mt-4">
+                      <Skeleton className="h-5 w-full rounded-md mb-1" />
+                      <Skeleton className="h-4 w-3/4 rounded-md" />
+                    </div>
+                    <div className="flex flex-col gap-2 mt-1">
+                      <Skeleton className="h-4 w-16 rounded-md" />
+                      <Skeleton className="w-full h-8 rounded-md mt-1" />
+                    </div>
+                  </div>
+                </MenuItemRenderer>
+              ))}
+            </div>
+          ) : (
+            [...Array(6)].map((_, index) => (
+              <MenuItemRenderer key={index} variant="list">
+                <div className="flex gap-4 w-full h-full items-center">
+                  <Skeleton className="min-w-28 w-28 h-28 rounded-xl" />
+                  <div className="w-full inline-flex flex-col justify-between">
+                    <div>
+                      <Skeleton className="h-5 w-32 rounded-md mb-2" />
+                      <Skeleton className="h-4 w-full rounded-md mb-1" />
+                      <Skeleton className="h-4 w-3/4 rounded-md" />
+                    </div>
+                    <div className="inline-flex mt-2 gap-2 justify-between w-full items-center">
+                      <div className="w-full flex flex-col gap-1">
+                        <Skeleton className="h-4 w-16 rounded-md" />
+                      </div>
+                      <Skeleton className="max-w-[115px] w-full h-8 rounded-md" />
                     </div>
-                    <Skeleton className="max-w-[115px] w-full h-8 rounded-md" />
                   </div>
                 </div>
-              </div>
-            </MenuItemRenderer>
-          ))}
+              </MenuItemRenderer>
+            ))
+          )}
         </VerticalScrollView>
       </section>
     </div>
diff --git a/src/app/[name]/(Main)/page.tsx b/src/app/[name]/(Main)/page.tsx
index 1dda1e2..6724bd1 100644
--- a/src/app/[name]/(Main)/page.tsx
+++ b/src/app/[name]/(Main)/page.tsx
@@ -152,7 +152,7 @@ const MenuIndex = () => {
   }, [selectedCategory, search, filterSearch, products, sorting]);
 
   if (isLoading) {
-    return <MenuSkeleton />;
+    return <MenuSkeleton viewMode={viewMode} />;
   }
 
   return (