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(() => {
const timer = setInterval(advance, 8000)
return () => clearInterval(timer)
let timer: ReturnType<typeof setInterval> | null = null
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])
const slide = slides[activeIndex]