fix loader display

src/common/LazyLoad.tsx

@@ -1,14 +1,14 @@
 import { CircularProgress } from '@mui/material';
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useInView } from 'react-intersection-observer'
 
 interface Props {
-  onLoadMore: () => void
+  onLoadMore: () => Promise<void>
 }
 
 const LazyLoad: React.FC<Props> = ({ onLoadMore }) => {
   const hasTriggeredRef = useRef(false); // Prevents multiple auto-triggers
-
+  const [isLoading, setIsLoading] = useState(false)
   const [ref, inView] = useInView({
     threshold: 0.7,
     triggerOnce: false, // Allows multiple triggers, but we control when
@@ -17,7 +17,10 @@ const LazyLoad: React.FC<Props> = ({ onLoadMore }) => {
   useEffect(() => {
     if (inView && !hasTriggeredRef.current) {
       hasTriggeredRef.current = true; // Set flag so it doesn’t trigger again immediately
-      onLoadMore();
+      setIsLoading(true)
+      onLoadMore().finally(()=> {
+        setIsLoading(false)
+      });
       setTimeout(() => {
         hasTriggeredRef.current = false; // Reset trigger after a short delay
       }, 1000);
@@ -33,7 +36,7 @@ const LazyLoad: React.FC<Props> = ({ onLoadMore }) => {
         height: '50px',
         overflow: 'hidden'
       }}
-    ><CircularProgress /></div>
+    >{isLoading &&<CircularProgress />}</div>
   )
 }