fix: reduce store rerenders and cleanup timers

src/features/home/ScriptReviewShowcase.tsx

@@ -50,6 +50,12 @@ function ScriptReviewShowcase() {
   const scoreRef = useRef<HTMLSpanElement>(null);
   const barRefs = useRef<(HTMLDivElement | null)[]>([]);
   const scoreValRefs = useRef<(HTMLSpanElement | null)[]>([]);
+  const animationTimersRef = useRef<ReturnType<typeof setTimeout>[]>([]);
+
+  const clearAnimationTimers = () => {
+    animationTimersRef.current.forEach((timer) => clearTimeout(timer));
+    animationTimersRef.current = [];
+  };
 
   useEffect(() => {
     const el = document.getElementById("script-review-showcase");
@@ -69,18 +75,23 @@ function ScriptReviewShowcase() {
 
   useEffect(() => {
     if (!animated) return;
-    const timer = setTimeout(() => {
+    clearAnimationTimers();
+    const scheduleAnimation = (callback: () => void, delay: number) => {
+      const timer = setTimeout(callback, delay);
+      animationTimersRef.current.push(timer);
+    };
+    scheduleAnimation(() => {
       animateNumber(scoreRef.current, 77, 1400);
       barRefs.current.forEach((bar, i) => {
         if (!bar) return;
         const pct = parseFloat(bar.dataset.pct ?? "0");
-        setTimeout(() => { bar.style.height = `${pct}%`; }, i * 100 + 400);
+        scheduleAnimation(() => { bar.style.height = `${pct}%`; }, i * 100 + 400);
       });
       scoreValRefs.current.forEach((el, i) => {
-        setTimeout(() => animateNumber(el, parseInt(el?.dataset.target ?? "0"), 800), i * 100 + 400);
+        scheduleAnimation(() => animateNumber(el, parseInt(el?.dataset.target ?? "0"), 800), i * 100 + 400);
       });
     }, 500);
-    return () => clearTimeout(timer);
+    return clearAnimationTimers;
   }, [animated]);
 
   return (