bug fix

src/widgets/categories/ui/category-carousel.tsx

@@ -5,17 +5,15 @@ import { product_api } from '@/shared/config/api/product/api';
 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,
   CarouselApi,
   CarouselContent,
   CarouselItem,
 } from '@/shared/ui/carousel';
-import { Skeleton } from '@/shared/ui/skeleton';
 import { useQuery } from '@tanstack/react-query';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { ProductCard } from './product-card';
 
 export function CategoryCarousel({ category }: { category: ProductTypes }) {
@@ -23,6 +21,32 @@ export function CategoryCarousel({ category }: { category: ProductTypes }) {
   const [api, setApi] = useState<CarouselApi>();
   const [canScrollPrev, setCanScrollPrev] = useState(false);
   const [canScrollNext, setCanScrollNext] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const sectionRef = useRef<HTMLElement>(null);
+
+  // Intersection Observer - faqat ko'ringan kategoriyalar uchun API so'rov yuborish
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setIsVisible(true);
+            observer.disconnect(); // Bir marta ko'ringandan keyin observer ni o'chirish
+          }
+        });
+      },
+      {
+        rootMargin: '100px', // Sahifa 100px yaqinlashganda yuklash
+        threshold: 0.1,
+      },
+    );
+
+    if (sectionRef.current) {
+      observer.observe(sectionRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, []);
 
   useEffect(() => {
     if (!api) return;
@@ -54,8 +78,9 @@ export function CategoryCarousel({ category }: { category: ProductTypes }) {
     }
   };
 
+  // Faqat ko'ringanda API so'rov yuborish
   const { data: product, isLoading } = useQuery({
-    queryKey: ['product_list', category],
+    queryKey: ['product_list', category.id],
     queryFn: () =>
       product_api.list({
         page: 1,
@@ -65,14 +90,41 @@ export function CategoryCarousel({ category }: { category: ProductTypes }) {
     select(data) {
       return data.data;
     },
+    enabled: isVisible, // Faqat ko'ringanda ishga tushadi
   });
 
-  if (product?.results.length === 0) {
+  // Agar hali ko'rinmagan bo'lsa, bo'sh div qaytarish (scroll uchun joy)
+  if (!isVisible) {
+    return (
+      <section
+        ref={sectionRef}
+        className="relative custom-container mt-5 min-h-[300px]"
+      />
+    );
+  }
+
+  // Agar loading bo'lmasa va mahsulotlar bo'lmasa, hech narsa ko'rsatmaymiz
+  if (!isLoading && (!product || product.results.length === 0)) {
+    return null;
+  }
+
+  // Agar loading bo'lmasa va faqat "active" mahsulotlar bo'lmasa ham ko'rsatmaymiz
+  if (!isLoading && product) {
+    const activeProducts = product.results.filter((p) => p.state === 'A');
+    if (activeProducts.length === 0) {
+      return null;
+    }
+  }
+
+  if (isLoading) {
     return null;
   }
 
   return (
-    <section className="relative custom-container mt-5 justify-center items-center border-b border-slate-200">
+    <section
+      ref={sectionRef}
+      className="relative custom-container mt-5 justify-center items-center border-b border-slate-200"
+    >
       <div className="flex items-center justify-between pb-3">
         <div
           className="flex items-center gap-2 group cursor-pointer"
@@ -89,20 +141,6 @@ export function CategoryCarousel({ category }: { category: ProductTypes }) {
 
       <Carousel className="w-full mt-2" setApi={setApi}>
         <CarouselContent className="pr-[12%] sm:pr-0">
-          {isLoading &&
-            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>
-            ))}
           {product &&
             !isLoading &&
             product.results