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,46 +136,48 @@ const StockLogTable = ({
     : [];
 
   return (
-    <Card
-      title={`Informasi Stock Produk - ${productWarehouse.warehouse_name}`}
-      collapsible
-      variant='bordered'
-      className={{
-        wrapper: 'w-full',
-      }}
-    >
-      <div className='flex justify-end px-6 pt-4'>
-        <Button onClick={handleExportExcel} isLoading={isExportLoading}>
-          <FileDown size={16} />
-          Export Excel
-        </Button>
-      </div>
-      <Table<StockLog>
-        data={stockLogs}
-        columns={stockLogTableColumns(productWarehouse.warehouse_name)}
-        page={tableFilterState.page ?? 0}
-        pageSize={tableFilterState.pageSize}
-        onPageChange={setPage}
-        onPageSizeChange={setPageSize}
-        isLoading={isLoadingStockLogs}
-        totalItems={
-          isResponseSuccess(stockLogsResponse)
-            ? stockLogsResponse.meta?.total_results
-            : 0
-        }
+    <div ref={containerRef}>
+      <Card
+        title={`Informasi Stock Produk - ${productWarehouse.warehouse_name}`}
+        collapsible
+        variant='bordered'
         className={{
-          containerClassName: 'mt-4 mb-0',
-          tableWrapperClassName: 'overflow-x-auto min-h-full!',
-          tableClassName: 'font-inter w-full table-auto min-h-full!',
-          headerRowClassName: 'border-b border-b-gray-200',
-          headerColumnClassName:
-            'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
-          bodyRowClassName: 'border-b border-b-gray-200',
-          bodyColumnClassName:
-            'px-6 py-3 last:flex last:flex-row last:justify-end',
+          wrapper: 'w-full',
         }}
-      />
-    </Card>
+      >
+        <div className='flex justify-end px-6 pt-4'>
+          <Button onClick={handleExportExcel} isLoading={isExportLoading}>
+            <FileDown size={16} />
+            Export Excel
+          </Button>
+        </div>
+        <Table<StockLog>
+          data={stockLogs}
+          columns={stockLogTableColumns(productWarehouse.warehouse_name)}
+          page={tableFilterState.page ?? 0}
+          pageSize={tableFilterState.pageSize}
+          onPageChange={setPage}
+          onPageSizeChange={setPageSize}
+          isLoading={isLoadingStockLogs}
+          totalItems={
+            isResponseSuccess(stockLogsResponse)
+              ? stockLogsResponse.meta?.total_results
+              : 0
+          }
+          className={{
+            containerClassName: 'mt-4 mb-0',
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
+      </Card>
+    </div>
   );
 };