From 35374094eb004c102dc5d4d4aa5a53dc2433962d Mon Sep 17 00:00:00 2001
From: Samandar Turgunboyev <turgunboyevsamandar4@gmail.com>
Date: Thu, 5 Mar 2026 14:57:34 +0500
Subject: [PATCH] bug fixed

---
 src/features/product/ui/Product.tsx           | 10 ++--
 .../categories/ui/category-carousel.tsx       | 49 +++++++++++--------
 src/widgets/welcome/ui/index.tsx              | 41 ++++++++++++++--
 3 files changed, 72 insertions(+), 28 deletions(-)

diff --git a/src/features/product/ui/Product.tsx b/src/features/product/ui/Product.tsx
index 3ee007e..418be14 100644
--- a/src/features/product/ui/Product.tsx
+++ b/src/features/product/ui/Product.tsx
@@ -81,16 +81,18 @@ const ProductDetail = () => {
       ? 0
       : Number(String(quantity).replace(',', '.'));
 
-  /* ---------------- HELPERS ---------------- */
   const clampQuantity = (value: number) => {
     if (isNaN(value)) return MIN_QTY;
 
-    let safe = Math.max(value, MIN_QTY);
-    safe = Math.min(safe);
+    let safe = value;
+
+    if (isGram) {
+      safe = Math.max(value, MIN_QTY);
+      safe = Math.ceil(safe / STEP) * STEP;
+    }
 
     return safe;
   };
-
   const getQuantityMessage = (qty: number, measurement: string | null) => {
     if (!measurement) return `${qty} dona`;
     return `${qty} ${measurement}`;
diff --git a/src/widgets/categories/ui/category-carousel.tsx b/src/widgets/categories/ui/category-carousel.tsx
index a9e11a0..0f8c32c 100644
--- a/src/widgets/categories/ui/category-carousel.tsx
+++ b/src/widgets/categories/ui/category-carousel.tsx
@@ -3,12 +3,14 @@
 import { useRouter } from '@/shared/config/i18n/navigation';
 import { cn } from '@/shared/lib/utils';
 import { Button } from '@/shared/ui/button';
+import { Card } from '@/shared/ui/card';
 import {
   Carousel,
   CarouselContent,
   CarouselItem,
   type CarouselApi,
 } from '@/shared/ui/carousel';
+import { Skeleton } from '@/shared/ui/skeleton';
 import { ProductCard } from '@/widgets/categories/ui/product-card';
 import { ProductRes } from '@/widgets/welcome/lib/api';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
@@ -20,11 +22,13 @@ import { memo, useEffect, useRef, useState } from 'react';
 interface CategoryCarouselProps {
   category: ProductRes;
   isLoading: boolean;
+  isError: boolean;
 }
 
 const CategoryCarousel = memo(function CategoryCarousel({
   category,
   isLoading,
+  isError,
 }: CategoryCarouselProps) {
   const router = useRouter();
   const [api, setApi] = useState<CarouselApi>();
@@ -36,7 +40,6 @@ const CategoryCarousel = memo(function CategoryCarousel({
   // Intersection Observer
   useEffect(() => {
     if (!sectionRef.current) return;
-
     const observer = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
@@ -48,7 +51,6 @@ const CategoryCarousel = memo(function CategoryCarousel({
       },
       { rootMargin: '100px', threshold: 0.1 },
     );
-
     observer.observe(sectionRef.current);
     return () => observer.disconnect();
   }, []);
@@ -72,7 +74,6 @@ const CategoryCarousel = memo(function CategoryCarousel({
   const scrollPrev = () => api?.scrollPrev();
   const scrollNext = () => api?.scrollNext();
 
-  // Shartli renderlar
   if (!isVisible) {
     return (
       <section
@@ -82,11 +83,8 @@ const CategoryCarousel = memo(function CategoryCarousel({
     );
   }
 
-  if (!isLoading && !category) return null;
-
   const activeProducts =
-    category?.products.filter((p) => p.state === 'A') ?? [];
-  if (!isLoading && activeProducts.length === 0) return null;
+    category?.products?.filter((p) => p.state === 'A') ?? [];
 
   return (
     <section
@@ -99,7 +97,7 @@ const CategoryCarousel = memo(function CategoryCarousel({
           onClick={() => router.push(`/category/${category.id}/`)}
         >
           <h2 className="text-2xl font-bold text-slate-800 group-hover:text-blue-600 transition-colors">
-            {category.name}
+            {category.name || '---'}
           </h2>
           <div className="p-1.5 bg-slate-100 rounded-full group-hover:bg-blue-100 transition-all">
             <ChevronRight className="text-slate-600 group-hover:text-blue-600 group-hover:translate-x-0.5 transition-all" />
@@ -108,22 +106,33 @@ const CategoryCarousel = memo(function CategoryCarousel({
       </div>
 
       <Carousel
-        opts={{
-          align: 'start',
-          dragFree: true, // 🔥 free scroll
-        }}
+        opts={{ align: 'start', dragFree: true }}
         className="w-full mt-2"
         setApi={setApi}
       >
         <CarouselContent className="pr-[12%] sm:pr-0">
-          {activeProducts.map((product) => (
-            <CarouselItem
-              key={product.id}
-              className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6 pb-2"
-            >
-              <ProductCard product={product} />
-            </CarouselItem>
-          ))}
+          {isLoading || isError || activeProducts.length === 0
+            ? Array.from({ length: 6 }).map((__, index) => (
+                <CarouselItem
+                  key={index}
+                  className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6 pb-2"
+                >
+                  <Card className="p-3 space-y-3 rounded-xl">
+                    <Skeleton className="h-40 sm:h-48 md:h-56 w-full rounded-lg" />
+                    <Skeleton className="h-4 w-3/4" />
+                    <Skeleton className="h-4 w-1/2" />
+                    <Skeleton className="h-10 w-full rounded-lg" />
+                  </Card>
+                </CarouselItem>
+              ))
+            : activeProducts.map((product) => (
+                <CarouselItem
+                  key={product.id}
+                  className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6 pb-2"
+                >
+                  <ProductCard product={product} />
+                </CarouselItem>
+              ))}
         </CarouselContent>
       </Carousel>
 
diff --git a/src/widgets/welcome/ui/index.tsx b/src/widgets/welcome/ui/index.tsx
index 3d728bc..4896ed5 100644
--- a/src/widgets/welcome/ui/index.tsx
+++ b/src/widgets/welcome/ui/index.tsx
@@ -80,7 +80,11 @@ const Welcome = () => {
     },
   });
 
-  const { data: allProducts, isLoading: allProductsLoading } = useQuery({
+  const {
+    data: allProducts,
+    isLoading: allProductsLoading,
+    isError: allProductsError,
+  } = useQuery({
     queryKey: ['all_products'],
     queryFn: () => banner_api.getAllProducts(),
     select(data) {
@@ -300,14 +304,43 @@ const Welcome = () => {
         </Button>
       </section>
 
-      {allProducts &&
-        allProducts.map((e) => (
+      {productLoading || allProductsLoading ? (
+        <section className="relative custom-container mt-5 justify-center items-center border-b border-slate-200">
+          <Carousel
+            opts={{
+              align: 'start',
+              dragFree: true,
+            }}
+            className="w-full"
+            setApi={setApiPro}
+          >
+            <CarouselContent className="pr-[12%] sm:pr-0">
+              {Array.from({ length: 6 }).map((__, index) => (
+                <CarouselItem
+                  key={index}
+                  className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6 pb-2"
+                >
+                  <Card className="p-3 space-y-3 rounded-xl">
+                    <Skeleton className="h-40 sm:h-48 md:h-56 w-full rounded-lg" />
+                    <Skeleton className="h-4 w-3/4" />
+                    <Skeleton className="h-4 w-1/2" />
+                    <Skeleton className="h-10 w-full rounded-lg" />
+                  </Card>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+        </section>
+      ) : (
+        allProducts?.map((e) => (
           <CategoryCarousel
             category={e}
             key={e.id}
             isLoading={allProductsLoading}
+            isError={allProductsError}
           />
-        ))}
+        ))
+      )}
     </>
   );
 };