added debounce to - + buttons

features/home/components/CategoryGrid.tsx

@@ -50,7 +50,7 @@ export default function CategoryGrid({
   return (
     <section className="bg-white rounded-2xl shadow-sm p-6">
       <h2 className="text-xl font-semibold mb-4">{title}</h2>
-      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
         {categories?.map((cat) => (
           <Link
             key={cat.id}

features/home/components/HomeSkeleton.tsx

@@ -0,0 +1,30 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import ProductGridSkeleton from "./ProductGridSkeleton"
+import CategorySkeleton from "../../category/components/CategorySkeleton"
+
+export default function HomeSkeleton() {
+  return (
+    <div className="px-4 md:px-8 lg:px-12 pt-8 pb-12 space-y-8">
+      {/* Hero Carousel Skeleton */}
+      <section className="rounded-2xl overflow-hidden">
+        <Skeleton className="w-full h-[200px] sm:h-[300px] md:h-[420px] bg-gray-200" />
+      </section>
+
+      {/* Categories Section Skeleton */}
+      <section className="bg-white rounded-2xl shadow-sm p-6">
+        <Skeleton className="h-6 w-32 mb-4 bg-gray-200" />
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <CategorySkeleton key={i} />
+          ))}
+        </div>
+      </section>
+
+      {/* Products Section Skeleton */}
+      <section className="bg-white rounded-2xl shadow-sm p-6">
+        <Skeleton className="h-6 w-32 mb-4 bg-gray-200" />
+        <ProductGridSkeleton count={10} columns="5" />
+      </section>
+    </div>
+  )
+}

features/home/components/ProductCardSkeleton.tsx

@@ -0,0 +1,23 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card } from "@/components/ui/card"
+
+export default function ProductCardSkeleton() {
+  return (
+    <Card className="overflow-hidden rounded-xl">
+      {/* Image Skeleton */}
+      <Skeleton className="aspect-square w-full bg-gray-200" />
+
+      {/* Content Skeleton */}
+      <div className="p-3 space-y-3">
+        {/* Title skeleton - 2 lines */}
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-full bg-gray-200" />
+          <Skeleton className="h-4 w-3/4 bg-gray-200" />
+        </div>
+
+        {/* Price skeleton */}
+        <Skeleton className="h-6 w-1/2 bg-gray-200" />
+      </div>
+    </Card>
+  )
+}

features/home/components/ProductGrid.tsx

@@ -76,7 +76,7 @@ export default function CollectionSection({ collection, locale }: Props) {
         <ChevronRight className="w-6 h-6 text-gray-400 group-hover:text-blue-600 group-hover:translate-x-1 transition-all" />
       </div>
 
-      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
         {displayProducts.map((product) => {
           // Extract first media image or use placeholder
           const firstImage =

features/home/components/ProductGridSkeleton.tsx

@@ -0,0 +1,24 @@
+import ProductCardSkeleton from "./ProductCardSkeleton"
+
+interface ProductGridSkeletonProps {
+  count?: number
+  columns?: "2" | "3" | "4" | "5"
+}
+
+export default function ProductGridSkeleton({ count = 8, columns = "4" }: ProductGridSkeletonProps) {
+  const gridClass =
+    {
+      "2": "grid-cols-2",
+      "3": "md:grid-cols-3",
+      "4": "md:grid-cols-4 lg:grid-cols-4",
+      "5": "md:grid-cols-4 xl:grid-cols-5",
+    }[columns] || "md:grid-cols-4"
+
+  return (
+    <div className={`grid grid-cols-2 sm:grid-cols-3 ${gridClass} gap-4`}>
+      {Array.from({ length: count }).map((_, i) => (
+        <ProductCardSkeleton key={i} />
+      ))}
+    </div>
+  )
+}

features/home/hooks/useCollections.ts

@@ -101,7 +101,7 @@ export function useCollectionHasProducts(
     queryFn: async () => {
       const response = await apiClient.get<PaginatedResponse<Product>>(
         `/collections/${collectionId}/products`,
-        { params: { perPage: 1 } }
+        { params: { perPage: 20 } }
       );
       return {
         hasProducts: response.data.data && response.data.data.length > 0,