js/src/features/particles/stream-view.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useReducer, useRef } from "react";
+import { useState, useEffect, useEffectEvent, useCallback, useReducer, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAuthStore } from "@/stores/auth-store";
 import type { Particle } from "@/api/types";
@@ -102,6 +102,10 @@ function useExitCountdown(
 ) {
   const [exitProgress, setExitProgress] = useState<number | null>(null);
 
+  const handleExit = useEffectEvent(() => {
+    onExit();
+  });
+
   // Start/cancel countdown based on playback status
   useEffect(() => {
     if (status === "ended") {
@@ -119,16 +123,19 @@ function useExitCountdown(
       setExitProgress((prev) => {
         if (prev === null) return null;
         const next = prev + EXIT_TICK_MS / EXIT_DELAY_MS;
-        if (next >= 1) {
-          onExit();
-          return 1;
-        }
-        return next;
+        return next >= 1 ? 1 : next;
       });
     }, EXIT_TICK_MS);
 
     return () => clearInterval(interval);
-  }, [exitProgress !== null, composeActive, onExit]);
+  }, [exitProgress !== null, composeActive]);
+
+  // Navigate once countdown completes
+  useEffect(() => {
+    if (exitProgress !== null && exitProgress >= 1) {
+      handleExit();
+    }
+  }, [exitProgress]);
 
   return exitProgress;
 }