Refactored VendorInfo component to use useCallback for fetchVendorDetails, improving performance and preventing unnecessary re-renders. Enhanced DashboardTable with a scroll handler for dynamic loading of data when scrolling up and down in card view.

src/components/Dashboard/Management/Vendors/VendorInfo.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import { useLocation } from 'react-router-dom'
 import axios from 'axios'
 import {
@@ -61,7 +61,7 @@ const VendorInfo = () => {
     if (vendorId) {
       fetchVendorDetails()
     }
-  }, [vendorId])
+  }, [vendorId, fetchVendorDetails])
 
   useEffect(() => {
     if (vendorData) {
@@ -76,7 +76,7 @@ const VendorInfo = () => {
     }
   }, [vendorData, form])
 
-  const fetchVendorDetails = async () => {
+  const fetchVendorDetails = useCallback(async () => {
     try {
       setFetchLoading(true)
       const response = await axios.get(
@@ -96,7 +96,7 @@ const VendorInfo = () => {
     } finally {
       setFetchLoading(false)
     }
-  }
+  }, [messageApi, vendorId])
 
   const startEditing = () => {
     updateCollapseState('info', true)
@@ -137,7 +137,6 @@ const VendorInfo = () => {
       if (err.errorFields) {
         return
       }
-      console.error('Failed to update vendor information:', err)
       messageApi.error('Failed to update vendor information')
     } finally {
       fetchVendorDetails()

src/components/Dashboard/common/DashboardTable.jsx

@@ -304,11 +304,52 @@ const DashboardTable = forwardRef(
     const tableData = pages.flatMap((page) => page.items)
 
     // Card view rendering
+    const cardsContainerRef = useRef(null)
+
+    // Card view scroll handler
+    useEffect(() => {
+      if (!cards) return
+      const container = cardsContainerRef.current
+      if (!container) return
+
+      const handleCardsScroll = (e) => {
+        const { scrollTop, scrollHeight, clientHeight } = e.target
+        const lowestPage = Math.min(...pages.map((p) => p.pageNum))
+        const prevPage = lowestPage - 1
+
+        // Load more data when scrolling down
+        if (
+          scrollHeight - scrollTop - clientHeight < 100 &&
+          hasMore &&
+          !lazyLoading
+        ) {
+          setTimeout(() => {
+            e.target.scrollTop = scrollHeight / 2
+          }, 0)
+          setLazyLoading(true)
+          loadNextPage()
+        }
+
+        // Load previous data when scrolling up
+        if (scrollTop < 100 && prevPage > 0 && !lazyLoading) {
+          setTimeout(() => {
+            e.target.scrollTop = scrollHeight / 2
+          }, 0)
+          setLazyLoading(true)
+          loadPreviousPage()
+        }
+      }
+
+      container.addEventListener('scroll', handleCardsScroll)
+      return () => container.removeEventListener('scroll', handleCardsScroll)
+    }, [cards, pages, hasMore, lazyLoading, loadNextPage, loadPreviousPage])
+
     const renderCards = () => {
       return (
         <Row
           gutter={[16, 16]}
           style={{ overflowY: 'auto', maxHeight: adjustedScrollHeight }}
+          ref={cardsContainerRef}
         >
           {tableData.map((record) => {
             // Special case for columns[0] if needed