fix(presence) : count visible browsers accurately

hooks/use-presence.ts

@@ -50,10 +50,19 @@ function useHeartbeat<T>({
 }) {
   const [value, setValue] = useState<T | null>(null);
   const pending = useRef(false);
+  const queuedActive = useRef<boolean | null>(null);
   const send = useEffectEvent(async (active = true) => {
-    if (active && (document.visibilityState !== "visible" || pending.current)) return;
+    if (active && document.visibilityState !== "visible") return;
+    if (pending.current) {
+      queuedActive.current = active;
+      return;
+    }
     pending.current = true;
+    let nextActive: boolean | null = active;
     try {
+      while (nextActive !== null) {
+        const requestActive = nextActive;
+        queuedActive.current = null;
         const response = await fetch(endpoint, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
@@ -62,38 +71,44 @@ function useHeartbeat<T>({
             ...(identifyBy === "browser" ? { browserId: visitorId() } : {}),
             guideId,
             ...(section !== undefined ? { section } : {}),
-          active,
+            active: requestActive,
           }),
           cache: "no-store",
-        keepalive: !active,
+          keepalive: !requestActive,
         });
         if (!response.ok) throw new Error("presence unavailable");
-      if (active) setValue(await response.json() as T);
+        if (requestActive) setValue(await response.json() as T);
+        nextActive = queuedActive.current;
+      }
     } catch {
       if (active) setValue(null);
     } finally {
       pending.current = false;
+      if (queuedActive.current !== null) {
+        const queued = queuedActive.current;
+        queuedActive.current = null;
+        void send(queued);
+      }
     }
   });
 
   useEffect(() => {
     const immediate = window.setTimeout(() => void send(), 0);
     const interval = window.setInterval(() => void send(), PRESENCE_HEARTBEAT_MS);
-    const refresh = () => {
+    const refresh = () => void send();
-      if (document.visibilityState === "visible") void send();
+    const visibilityChange = () => void send(document.visibilityState === "visible");
-    };
     const leave = () => {
       void send(false);
     };
     window.addEventListener("focus", refresh);
     window.addEventListener("pagehide", leave);
-    document.addEventListener("visibilitychange", refresh);
+    document.addEventListener("visibilitychange", visibilityChange);
     return () => {
       window.clearInterval(interval);
       window.clearTimeout(immediate);
       window.removeEventListener("focus", refresh);
       window.removeEventListener("pagehide", leave);
-      document.removeEventListener("visibilitychange", refresh);
+      document.removeEventListener("visibilitychange", visibilityChange);
     };
   }, [endpoint, guideId, identifyBy, section]);