skeleton home page

src/app/[name]/(Main)/components/MenuSkeleton.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { Skeleton } from "@/components/ui/skeleton";
+import VerticalScrollView from "@/components/listview/VerticalScrollView";
+import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
+
+const MenuSkeleton = () => {
+  return (
+    <div className="flex flex-col gap-4 items-center pt-8 mb-8">
+      <div className="w-full">
+        <Skeleton className="h-12 w-full rounded-xl mb-4" />
+        <div className="flex gap-3 overflow-x-hidden py-4">
+          {[...Array(5)].map((_, index) => (
+            <Skeleton key={index} className="h-24 w-24 rounded-xl shrink-0" />
+          ))}
+        </div>
+      </div>
+
+      <section className="w-full">
+        <div className="flex justify-between items-center mb-5">
+          <Skeleton className="h-5 w-20 rounded-md" />
+          <div className="flex gap-2">
+            <Skeleton className="h-8 w-24 rounded-xl" />
+            <Skeleton className="h-8 w-28 rounded-xl" />
+          </div>
+        </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" />
+                    </div>
+                    <Skeleton className="max-w-[115px] w-full h-8 rounded-md" />
+                  </div>
+                </div>
+              </div>
+            </MenuItemRenderer>
+          ))}
+        </VerticalScrollView>
+      </section>
+    </div>
+  );
+};
+
+export default MenuSkeleton;

src/app/[name]/(Main)/page.tsx

@@ -14,16 +14,19 @@ import useToggle from "@/hooks/helpers/useToggle";
 import CategoryScroll from "@/app/[name]/(Main)/components/CategoryScroll";
 import MenuFilterDrawer from "@/app/[name]/(Main)/components/MenuFilterDrawer";
 import MenuSortingDrawer from "@/app/[name]/(Main)/components/MenuSortingDrawer";
+import MenuSkeleton from "@/app/[name]/(Main)/components/MenuSkeleton";
 import { useGetCategories, useGetFoods } from "./hooks/useMenuData";
 import type { Food, Category } from "./types/Types";
 
 const sortings = ["PopularityDescending", "RateDescending", "PriceAscending", "PriceDescending"] as const;
 
 const MenuIndex = () => {
-  const { data: foodsData } = useGetFoods();
-  const { data: categoriesData } = useGetCategories();
+  const { data: foodsData, isLoading: foodsLoading } = useGetFoods();
+  const { data: categoriesData, isLoading: categoriesLoading } = useGetCategories();
   const foods = useMemo<Food[]>(() => foodsData?.data || [], [foodsData?.data]);
   const categories = useMemo<Category[]>(() => categoriesData?.data || [], [categoriesData?.data]);
+
+  const isLoading = foodsLoading || categoriesLoading;
   const { t: tCommon } = useTranslation('common');
   const { t: tMenu } = useTranslation('menu', { keyPrefix: "Menu" });
   const { state: filterModal, toggle: toggleFilterModal } = useToggle();
@@ -143,6 +146,11 @@ const MenuIndex = () => {
       }
     });
   }, [selectedCategory, search, selectedIngredients, selectedDeliveryId, foods, categories, sorting]);
+
+  if (isLoading) {
+    return <MenuSkeleton />;
+  }
+
   return (
     <div className="flex flex-col gap-4 items-center pt-8 mb-8" ref={wrapperRef}>
       <div className="w-full">