feat: only fetch when user scroll to the component

src/components/pages/inventory/product/detail/StockLogTable.tsx

@@ -9,7 +9,7 @@ import { ProductWarehouseStock, StockLog } from '@/types/api/inventory/product';
 import { ColumnDef } from '@tanstack/react-table';
 import { FileDown } from 'lucide-react';
 import toast from 'react-hot-toast';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import useSWR from 'swr';
 
 const stockLogTableColumns: (warehouseName: string) => ColumnDef<StockLog>[] = (
@@ -80,6 +80,23 @@ const StockLogTable = ({
   productWarehouse: ProductWarehouseStock;
 }) => {
   const [isExportLoading, setIsExportLoading] = useState(false);
+  const [hasBeenVisible, setHasBeenVisible] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setHasBeenVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    if (containerRef.current) observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, []);
 
   const {
     state: tableFilterState,
@@ -108,7 +125,9 @@ const StockLogTable = ({
   };
 
   const { data: stockLogsResponse, isLoading: isLoadingStockLogs } = useSWR(
-    `${StockLogApi.basePath}${getTableFilterQueryString()}`,
+    hasBeenVisible
+      ? `${StockLogApi.basePath}${getTableFilterQueryString()}`
+      : null,
     StockLogApi.getAllFetcher
   );
 
@@ -117,6 +136,7 @@ const StockLogTable = ({
     : [];
 
   return (
+    <div ref={containerRef}>
       <Card
         title={`Informasi Stock Produk - ${productWarehouse.warehouse_name}`}
         collapsible
@@ -157,6 +177,7 @@ const StockLogTable = ({
           }}
         />
       </Card>
+    </div>
   );
 };