From f2a30ac9adfa8bef0b901ba0453f2a12e1daace6 Mon Sep 17 00:00:00 2001
From: PhilReact <philliplangmartinez@gmail.com>
Date: Wed, 26 Mar 2025 22:55:26 +0200
Subject: [PATCH] fix loader display
---
src/common/LazyLoad.tsx | 13 ++++++++-----
1 file changed, 8 insertions(+), 5 deletions(-)
diff --git a/src/common/LazyLoad.tsx b/src/common/LazyLoad.tsx
index 4696dc7..5764e76 100644
--- a/src/common/LazyLoad.tsx
+++ b/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>
)
}