feat(ui): refresh projects page on mount and on 60s interval (#12694)

* feat(ui): refresh projects page on mount and on interval

Fixes #12431. The projects list now fetches fresh data on page mount
using `store-and-network` policy and polls every 60 seconds so new
projects appear while the user is idle.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* format

* Pause useInterval when page is no longer visible

---------

Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Tony Powell <apowell@arize.com>

Author: 4 people

app/src/hooks/useInterval.ts

@@ -3,28 +3,51 @@ import { useEffect, useRef } from "react";
 type Callback = () => void;
 
 /**
- * Custom hook to use setInterval with React hooks
- * @param callback
- * @param {number | null} delay - if set to null, no interval will be set
+ * setInterval that automatically pauses when the page tab is hidden
+ * and fires immediately upon becoming visible again.
+ * @param callback - function to call on each tick
+ * @param delay - interval in ms, or null to disable
  */
 export function useInterval(callback: Callback, delay: number | null) {
   const savedCallback = useRef<Callback | null>(null);
 
-  // Remember the latest callback.
   useEffect(() => {
     savedCallback.current = callback;
   }, [callback]);
 
-  // Set up the interval.
   useEffect(() => {
+    if (typeof delay !== "number") return;
+
+    const intervalMs = delay;
+
     function tick() {
-      if (savedCallback.current) {
-        savedCallback.current();
-      }
+      savedCallback.current?.();
     }
-    if (typeof delay === "number") {
-      const id = setInterval(tick, delay);
-      return () => clearInterval(id);
+
+    let id: ReturnType<typeof setInterval> | null = setInterval(
+      tick,
+      intervalMs
+    );
+
+    function onVisibilityChange() {
+      if (document.visibilityState === "hidden") {
+        if (id != null) {
+          clearInterval(id);
+          id = null;
+        }
+      } else {
+        if (id == null) {
+          tick();
+          id = setInterval(tick, intervalMs);
+        }
+      }
     }
+
+    document.addEventListener("visibilitychange", onVisibilityChange);
+
+    return () => {
+      if (id != null) clearInterval(id);
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+    };
   }, [delay]);
 }

app/src/pages/projects/ProjectsPage.tsx

@@ -60,6 +60,7 @@ import {
   usePreferencesContext,
   useViewerCanModify,
 } from "@phoenix/contexts";
+import { useInterval } from "@phoenix/hooks";
 import type {
   ProjectsPageProjectMetricsQuery,
   ProjectsPageProjectMetricsQuery$data,
@@ -81,6 +82,7 @@ import { NewProjectButton } from "./NewProjectButton";
 import { ProjectActionMenu } from "./ProjectActionMenu";
 
 const PAGE_SIZE = 10;
+const PROJECTS_POLL_INTERVAL_MS = 60_000;
 
 const useProjectSortQueryParams = () => {
   const { projectSortOrder } = usePreferencesContext((state) => ({
@@ -120,7 +122,8 @@ export function ProjectsPage() {
       first: PAGE_SIZE,
       filter: { value: "", col: "name" },
       ...queryParams,
-    }
+    },
+    { fetchPolicy: "store-and-network" }
   );
 
   return (
@@ -223,6 +226,8 @@ export function ProjectsPageContent({
     [_refetch, queryArgs]
   );
 
+  useInterval(() => refetch({}), PROJECTS_POLL_INTERVAL_MS);
+
   const projects = projectsData?.projects.edges.map((p) => p.project);
 
   const projectsContainerRef = useRef<HTMLDivElement>(null);