@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Dashboard pages no longer keep polling for updates while their browser tab is hidden, which could leave a tab you came back to showing a connection error instead of your data. Pages refresh when you return to the tab.
@@ -227,7 +227,6 @@ export function useDeliveriesLiveReload({
   useInterval({
     interval: DELIVERIES_POLL_INTERVAL_MS,
     onLoad: true,
-    pauseWhenHidden: true,
     disabled: !shouldPoll,
     callback: () => {
       loadDeliveriesPoll(checkNewDeliveriesOnTick());
 
@@ -1,51 +1,36 @@
 import { useRevalidator } from "@remix-run/react";
-import { useEffect, useRef } from "react";
+import { useInterval } from "./useInterval";
 
 type UseAutoRevalidateOptions = {
   interval?: number; // in milliseconds
   onFocus?: boolean;
   disabled?: boolean;
 };
 
+/**
+ * Re-runs the current route's loaders on a timer.
+ *
+ * Ticks are skipped while the tab is hidden. A backgrounded tab has no one watching it,
+ * and at the default interval it would otherwise spend a working day accumulating
+ * thousands of chances to catch a dropped connection — each one fatal to the page.
+ * Returning to the tab fires the focus handler, so the data is still fresh on arrival.
+ */
 export function useAutoRevalidate(options: UseAutoRevalidateOptions = {}) {
   const { interval = 5000, onFocus = true, disabled = false } = options;
   const revalidator = useRevalidator();
-  const revalidatorRef = useRef(revalidator);
-  // oxlint-disable-next-line react/refs -- This ref intentionally coordinates an imperative integration outside React state.
-  revalidatorRef.current = revalidator;
 
-  useEffect(() => {
-    if (!interval || interval <= 0 || disabled) return;
-
-    const intervalId = setInterval(() => {
-      if (revalidatorRef.current.state === "loading") {
+  useInterval({
+    interval,
+    onFocus,
+    disabled,
+    onLoad: false,
+    callback: () => {
+      if (revalidator.state === "loading") {
         return;
       }
-      revalidatorRef.current.revalidate();
-    }, interval);
-
-    return () => clearInterval(intervalId);
-  }, [interval, disabled]);
-
-  useEffect(() => {
-    if (!onFocus || disabled) return;
-
-    const handleFocus = () => {
-      if (document.visibilityState === "visible" && revalidatorRef.current.state !== "loading") {
-        revalidatorRef.current.revalidate();
-      }
-    };
-
-    // Revalidate when the page becomes visible
-    document.addEventListener("visibilitychange", handleFocus);
-    // Revalidate when the window gains focus
-    window.addEventListener("focus", handleFocus);
-
-    return () => {
-      document.removeEventListener("visibilitychange", handleFocus);
-      window.removeEventListener("focus", handleFocus);
-    };
-  }, [onFocus, disabled]);
+      revalidator.revalidate();
+    },
+  });
 
   return revalidator;
 }
@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+import { shouldRunIntervalTick } from "./useInterval";
+
+describe("shouldRunIntervalTick", () => {
+  it("pauses a caller that says nothing, because the default is to pause", () => {
+    expect(shouldRunIntervalTick(undefined, "hidden")).toBe(false);
+    expect(shouldRunIntervalTick(undefined, "visible")).toBe(true);
+  });
+
+  it("keeps ticking while hidden only when a caller opts out on purpose", () => {
+    expect(shouldRunIntervalTick(false, "hidden")).toBe(true);
+    expect(shouldRunIntervalTick(false, "visible")).toBe(true);
+  });
+
+  it("pauses when a caller asks for it explicitly", () => {
+    expect(shouldRunIntervalTick(true, "hidden")).toBe(false);
+    expect(shouldRunIntervalTick(true, "visible")).toBe(true);
+  });
+});
@@ -1,12 +1,31 @@
 import { useEffect, useRef } from "react";
 
+/**
+ * Whether a tick should fire, given the caller's `pauseWhenHidden` and the tab's current
+ * visibility. Owns the default so there is one place it can be read or changed, and so a
+ * test can pin it: defaulting this to false is what let a backgrounded tab poll itself
+ * into a connection error.
+ */
+export function shouldRunIntervalTick(
+  pauseWhenHidden: boolean | undefined,
+  visibilityState: DocumentVisibilityState
+): boolean {
+  const paused = pauseWhenHidden ?? true;
+  return !paused || visibilityState === "visible";
+}
+
 type UseIntervalOptions = {
   /** If passed, will refresh every interval MS */
   interval?: number;
   onLoad?: boolean;
   onFocus?: boolean;
   disabled?: boolean;
-  /** Skip interval ticks while the document tab is hidden */
+  /**
+   * Skip interval ticks while the tab is hidden. Defaults to true, because a poller
+   * nobody is looking at just accumulates chances to fail, and the focus handler below
+   * already refreshes on return. Pass false only for work that genuinely cannot wait for
+   * the tab to come back, and say why at the call site.
+   */
   pauseWhenHidden?: boolean;
   callback: () => void;
 };
@@ -16,7 +35,7 @@ export function useInterval({
   onLoad = true,
   onFocus = true,
   disabled = false,
-  pauseWhenHidden = false,
+  pauseWhenHidden,
   callback,
 }: UseIntervalOptions) {
   // Always keep the latest callback in a ref so the effects below
@@ -31,7 +50,7 @@ export function useInterval({
     if (!interval || interval <= 0 || disabled) return;
 
     const intervalId = setInterval(() => {
-      if (pauseWhenHidden && document.visibilityState !== "visible") {
+      if (!shouldRunIntervalTick(pauseWhenHidden, document.visibilityState)) {
         return;
       }
       latestCallback.current();
 
@@ -223,7 +223,6 @@ export function useMetricResourceQuery(query: string, opts: MetricResourceQueryO
     interval: refreshIntervalMs,
     onLoad: false,
     onFocus: true,
-    pauseWhenHidden: true,
     callback: load,
   });
 
 
@@ -909,7 +909,6 @@ function useConcurrencyKeys(opts: {
     interval: 30_000,
     onLoad: false,
     onFocus: true,
-    pauseWhenHidden: true,
     callback: load,
   });
 
 
@@ -284,7 +284,6 @@ export function useRunsLiveReload({
   useInterval({
     interval: RUNS_POLL_INTERVAL_MS,
     onLoad: true,
-    pauseWhenHidden: true,
     disabled: !shouldPoll,
     callback: () => {
       loadRunsPoll(checkNewRunsOnTick());
 
@@ -154,7 +154,6 @@ export default function Page() {
   const inFlight = delivery?.status === "PENDING" || delivery?.status === "PROCESSING";
   useInterval({
     interval: 3000,
-    pauseWhenHidden: true,
     disabled: !inFlight,
     callback: () => revalidator.revalidate(),
   });
 
@@ -10,6 +10,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "~/components/primitives
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { useFeatures } from "~/hooks/useFeatures";
 import { BetterStackClient, type AggregateState } from "~/services/betterstack/betterstack.server";
+import { useInterval } from "~/hooks/useInterval";
 
 // Prevent Remix from revalidating this route when other fetchers submit
 export const shouldRevalidate: ShouldRevalidateFunction = () => false;
@@ -56,18 +57,16 @@ export function useIncidentStatus() {
     }
   }, [isManagedCloud, load, state]);
 
-  useEffect(() => {
-    if (!isManagedCloud) return;
-
-    // Poll every 60 seconds
-    const interval = setInterval(() => {
+  useInterval({
+    interval: POLL_INTERVAL_MS,
+    onLoad: false,
+    disabled: !isManagedCloud,
+    callback: () => {
       if (stateRef.current === "idle") {
         load("/resources/incidents");
       }
-    }, POLL_INTERVAL_MS);
-
-    return () => clearInterval(interval);
-  }, [isManagedCloud, load, stateRef]);
+    },
+  });
 
   return {
     status: fetcher.data?.status ?? "operational",