perf(web): pause dashboard refresh when inactive

apps/web/src/lib/client/dashboard-refresh.test.ts

@@ -0,0 +1,76 @@
+import { describe, expect, test } from "vitest";
+import {
+  attachDashboardRefreshLifecycle,
+  createDashboardRequestAborter,
+  shouldPauseDashboardRefresh,
+} from "./dashboard-refresh";
+
+describe("dashboard refresh lifecycle", () => {
+  test("pauses refreshes when the document is hidden or the browser is offline", () => {
+    expect(
+      shouldPauseDashboardRefresh({ visibilityState: "visible", online: true }),
+    ).toBe(false);
+    expect(
+      shouldPauseDashboardRefresh({ visibilityState: "hidden", online: true }),
+    ).toBe(true);
+    expect(
+      shouldPauseDashboardRefresh({ visibilityState: "visible", online: false }),
+    ).toBe(true);
+  });
+
+  test("aborts shell and tile requests when a new shell run starts", () => {
+    const aborter = createDashboardRequestAborter();
+    const shellSignal = aborter.beginShellRun();
+    const tileSignal = aborter.beginTileRun();
+
+    const nextShellSignal = aborter.beginShellRun();
+
+    expect(shellSignal.aborted).toBe(true);
+    expect(tileSignal.aborted).toBe(true);
+    expect(nextShellSignal.aborted).toBe(false);
+  });
+
+  test("aborts active requests when refreshes are paused", () => {
+    const aborter = createDashboardRequestAborter();
+    const shellSignal = aborter.beginShellRun();
+    const tileSignal = aborter.beginTileRun();
+
+    aborter.abortActiveRequests();
+
+    expect(shellSignal.aborted).toBe(true);
+    expect(tileSignal.aborted).toBe(true);
+  });
+
+  test("pauses on hidden, offline, and pagehide events then resumes immediately when visible", () => {
+    const documentTarget = new EventTarget();
+    const windowTarget = new EventTarget();
+    const calls: string[] = [];
+    let paused = true;
+
+    const detach = attachDashboardRefreshLifecycle({
+      documentTarget,
+      windowTarget,
+      loadDashboard: () => {
+        calls.push("load");
+      },
+      pauseRefreshes: () => {
+        calls.push("pause");
+      },
+      refreshPaused: () => paused,
+    });
+
+    documentTarget.dispatchEvent(new Event("visibilitychange"));
+    windowTarget.dispatchEvent(new Event("offline"));
+    windowTarget.dispatchEvent(new Event("pagehide"));
+
+    paused = false;
+    documentTarget.dispatchEvent(new Event("visibilitychange"));
+    windowTarget.dispatchEvent(new Event("online"));
+
+    detach();
+    documentTarget.dispatchEvent(new Event("visibilitychange"));
+    windowTarget.dispatchEvent(new Event("online"));
+
+    expect(calls).toEqual(["pause", "pause", "pause", "load", "load"]);
+  });
+});

apps/web/src/lib/client/dashboard-refresh.ts

@@ -0,0 +1,90 @@
+export interface DashboardRefreshPauseState {
+  visibilityState: DocumentVisibilityState;
+  online: boolean;
+}
+
+export function shouldPauseDashboardRefresh(
+  state: DashboardRefreshPauseState,
+): boolean {
+  return state.visibilityState !== "visible" || !state.online;
+}
+
+export function createDashboardRequestAborter() {
+  let shellController: AbortController | undefined;
+  let tileController: AbortController | undefined;
+
+  function abortController(controller: AbortController | undefined) {
+    if (controller && !controller.signal.aborted) {
+      controller.abort();
+    }
+  }
+
+  return {
+    beginShellRun(): AbortSignal {
+      abortController(shellController);
+      abortController(tileController);
+      shellController = new AbortController();
+      tileController = undefined;
+      return shellController.signal;
+    },
+    beginTileRun(): AbortSignal {
+      abortController(tileController);
+      tileController = new AbortController();
+      return tileController.signal;
+    },
+    abortActiveRequests(): void {
+      abortController(shellController);
+      abortController(tileController);
+      shellController = undefined;
+      tileController = undefined;
+    },
+  };
+}
+
+type DashboardRefreshEventTarget = Pick<
+  EventTarget,
+  "addEventListener" | "removeEventListener"
+>;
+
+export interface DashboardRefreshLifecycleOptions {
+  documentTarget: DashboardRefreshEventTarget;
+  windowTarget: DashboardRefreshEventTarget;
+  loadDashboard: () => void | Promise<void>;
+  pauseRefreshes: () => void;
+  refreshPaused: () => boolean;
+}
+
+export function attachDashboardRefreshLifecycle(
+  options: DashboardRefreshLifecycleOptions,
+): () => void {
+  function handleRefreshLifecycleChange() {
+    if (options.refreshPaused()) {
+      options.pauseRefreshes();
+      return;
+    }
+
+    void options.loadDashboard();
+  }
+
+  function handlePageHide() {
+    options.pauseRefreshes();
+  }
+
+  options.documentTarget.addEventListener(
+    "visibilitychange",
+    handleRefreshLifecycleChange,
+  );
+  options.windowTarget.addEventListener("online", handleRefreshLifecycleChange);
+  options.windowTarget.addEventListener("offline", handleRefreshLifecycleChange);
+  options.windowTarget.addEventListener("pagehide", handlePageHide);
+
+  return () => {
+    options.documentTarget.removeEventListener(
+      "visibilitychange",
+      handleRefreshLifecycleChange,
+    );
+    options.windowTarget.removeEventListener("online", handleRefreshLifecycleChange);
+    options.windowTarget.removeEventListener("offline", handleRefreshLifecycleChange);
+    options.windowTarget.removeEventListener("pagehide", handlePageHide);
+  };
+}