From 5faa0dec804d4c0778229eaf5e0b500978d7ae80 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 15:52:17 +0100
Subject: [PATCH] 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.
---
 components/checkout/FeatureSlideshow.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/components/checkout/FeatureSlideshow.tsx b/components/checkout/FeatureSlideshow.tsx
index a9147d0..d172b82 100644
--- a/components/checkout/FeatureSlideshow.tsx
+++ b/components/checkout/FeatureSlideshow.tsx
@@ -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]