added debounce to - + buttons

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>
+  )
+}