diff --git a/src/components/home/FeaturesSection.tsx b/src/components/home/FeaturesSection.tsx index dc20f71..b51f55f 100644 --- a/src/components/home/FeaturesSection.tsx +++ b/src/components/home/FeaturesSection.tsx @@ -29,53 +29,36 @@ export default function FeaturesSection() { const t = useTranslations("home"); const [activeFeature, setActiveFeature] = useState(0); const [progress, setProgress] = useState(0); - const progressIntervalRef = useRef(null); + + const intervalRef = useRef(null); const timeoutRef = useRef(null); - const isTransitioning = useRef(false); - useEffect(() => { - return () => { - if (progressIntervalRef.current) { - clearInterval(progressIntervalRef.current); - } - if (timeoutRef.current) { - clearTimeout(timeoutRef.current); - } - }; - }, []); - - const advanceToNextFeature = useCallback(() => { - setActiveFeature((prev) => (prev + 1) % features[0].items.length); - isTransitioning.current = false; - }, []); - - useEffect(() => { - setProgress(0); - isTransitioning.current = false; - - if (progressIntervalRef.current) { - clearInterval(progressIntervalRef.current); + const clearTimers = useCallback(() => { + if (intervalRef.current) { + clearInterval(intervalRef.current); + intervalRef.current = null; } - if (timeoutRef.current) { clearTimeout(timeoutRef.current); + timeoutRef.current = null; } + }, []); + + const startAutoProgress = useCallback(() => { + clearTimers(); + + setProgress(0); const updateInterval = 50; - const progressStep = (updateInterval / SLIDE_DURATION) * 100; + const progressIncrement = (updateInterval / SLIDE_DURATION) * 100; - progressIntervalRef.current = setInterval(() => { - setProgress((prevProgress) => { - const newProgress = prevProgress + progressStep; + intervalRef.current = setInterval(() => { + setProgress((prev) => { + const newProgress = prev + progressIncrement; if (newProgress >= 100) { - if (progressIntervalRef.current) { - clearInterval(progressIntervalRef.current); - } - - timeoutRef.current = setTimeout(() => { - advanceToNextFeature(); - }, 500); + clearInterval(intervalRef.current as NodeJS.Timeout); + intervalRef.current = null; return 100; } @@ -85,32 +68,28 @@ export default function FeaturesSection() { }, updateInterval); timeoutRef.current = setTimeout(() => { - advanceToNextFeature(); - }, SLIDE_DURATION + 1000); + timeoutRef.current = setTimeout(() => { + setActiveFeature((prev) => (prev + 1) % features[0].items.length); + }, 300); + }, SLIDE_DURATION); + }, [clearTimers]); - return () => { - if (progressIntervalRef.current) { - clearInterval(progressIntervalRef.current); - } - if (timeoutRef.current) { - clearTimeout(timeoutRef.current); - } - }; - }, [activeFeature, advanceToNextFeature]); + useEffect(() => { + startAutoProgress(); - const handleSlideChange = (index: number) => { - if (index === activeFeature) return; + return clearTimers; + }, [activeFeature, startAutoProgress, clearTimers]); - if (progressIntervalRef.current) { - clearInterval(progressIntervalRef.current); - } + const handleSlideChange = useCallback( + (index: number) => { + if (index === activeFeature) return; - if (timeoutRef.current) { - clearTimeout(timeoutRef.current); - } + clearTimers(); - setActiveFeature(index); - }; + setActiveFeature(index); + }, + [activeFeature, clearTimers] + ); const calculateCircleProgress = (percent: number) => { const radius = 10;