fix: pause carousel interval when tab is hidden

Prevents animation backlog from setInterval firing while the browser
throttles rAF in background tabs, which caused a blank carousel on return.
This commit is contained in:
Usman Baig
2026-03-27 15:52:17 +01:00
parent eca42d56ca
commit 5faa0dec80

View File

@@ -38,8 +38,22 @@ export default function FeatureSlideshow() {
}, []) }, [])
useEffect(() => { useEffect(() => {
const timer = setInterval(advance, 8000) let timer: ReturnType<typeof setInterval> | null = null
return () => clearInterval(timer)
const start = () => { timer = setInterval(advance, 8000) }
const stop = () => { if (timer) { clearInterval(timer); timer = null } }
const onVisibility = () => {
if (document.hidden) stop()
else start()
}
start()
document.addEventListener('visibilitychange', onVisibility)
return () => {
stop()
document.removeEventListener('visibilitychange', onVisibility)
}
}, [advance]) }, [advance])
const slide = slides[activeIndex] const slide = slides[activeIndex]