fix(webapp): preserve refresh behavior after dependency cleanup

Author: carderne

apps/webapp/app/assets/icons/AnimatedHourglassIcon.tsx

@@ -1,6 +1,6 @@
 import { useAnimate } from "framer-motion";
 import { HourglassIcon } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 
 export function AnimatedHourglassIcon({
   className,
@@ -10,6 +10,7 @@ export function AnimatedHourglassIcon({
   delay?: number;
 }) {
   const [scope, animate] = useAnimate();
+  const initialDelay = useRef(delay);
 
   useEffect(() => {
     const controls = animate(
@@ -19,11 +20,11 @@ export function AnimatedHourglassIcon({
         [scope.current, { rotate: 180 }, { duration: 0.7 }],
         [scope.current, { rotate: 360 }, { duration: 0.3 }],
       ],
-      { repeat: Infinity, delay }
+      { repeat: Infinity, delay: initialDelay.current }
     );
 
     return () => controls.stop();
-  }, [animate, delay, scope]);
+  }, [animate, scope]);
 
   return <HourglassIcon ref={scope} className={className} />;
 }

apps/webapp/app/routes/resources.incidents.tsx

@@ -3,6 +3,7 @@ import { json } from "@remix-run/node";
 import { useFetcher, type ShouldRevalidateFunction } from "@remix-run/react";
 import { motion } from "framer-motion";
 import { useEffect, useRef } from "react";
+import { useLatest } from "react-use";
 import { LinkButton } from "~/components/primitives/Buttons";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { Popover, PopoverContent, PopoverTrigger } from "~/components/primitives/Popover";
@@ -42,6 +43,7 @@ export function useIncidentStatus() {
   const { isManagedCloud } = useFeatures();
   const fetcher = useFetcher<typeof loader>();
   const { load, state } = fetcher;
+  const stateRef = useLatest(state);
   const hasInitiallyFetched = useRef(false);
 
   useEffect(() => {
@@ -52,16 +54,20 @@ export function useIncidentStatus() {
       hasInitiallyFetched.current = true;
       load("/resources/incidents");
     }
+  }, [isManagedCloud, load, state]);
+
+  useEffect(() => {
+    if (!isManagedCloud) return;
 
     // Poll every 60 seconds
     const interval = setInterval(() => {
-      if (state === "idle") {
+      if (stateRef.current === "idle") {
         load("/resources/incidents");
       }
     }, POLL_INTERVAL_MS);
 
     return () => clearInterval(interval);
-  }, [isManagedCloud, load, state]);
+  }, [isManagedCloud, load, stateRef]);
 
   return {
     status: fetcher.data?.status ?? "operational",

apps/webapp/app/routes/resources.metric.tsx

@@ -275,20 +275,7 @@ export function MetricWidget({
   // Reload periodically and on focus (onLoad: false — the useEffect below handles initial load)
   useInterval({ interval: refreshIntervalMs, callback: submit, onLoad: false });
 
-  const reloadKey = JSON.stringify({
-    query: props.query,
-    from: props.from,
-    to: props.to,
-    period: props.period,
-    scope: props.scope,
-    taskIdentifiers: props.taskIdentifiers,
-    queues: props.queues,
-    responseModels: props.responseModels,
-    promptSlugs: props.promptSlugs,
-    promptVersions: props.promptVersions,
-    operations: props.operations,
-    providers: props.providers,
-  });
+  const reloadKey = JSON.stringify(props);
 
   // Reload on mount and when query, time period, or filters change
   useEffect(() => {

apps/webapp/app/routes/resources.platform-changelogs.tsx

@@ -2,6 +2,7 @@ import { json } from "@remix-run/node";
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import { useFetcher, type ShouldRevalidateFunction } from "@remix-run/react";
 import { useEffect, useRef } from "react";
+import { useLatest } from "react-use";
 import { logger } from "~/services/logger.server";
 import { requireUserId } from "~/services/session.server";
 import { getRecentChangelogs, verifyOrgMembership } from "~/services/platformNotifications.server";
@@ -43,28 +44,30 @@ const POLL_INTERVAL_MS = 60_000;
 export function useRecentChangelogs(organizationId?: string, projectId?: string) {
   const fetcher = useFetcher<typeof loader>();
   const { load, state } = fetcher;
+  const stateRef = useLatest(state);
   const lastLoadedUrl = useRef<string | null>(null);
+  const params = new URLSearchParams();
+  if (organizationId) params.set("organizationId", organizationId);
+  if (projectId) params.set("projectId", projectId);
+  const qs = params.toString();
+  const url = `/resources/platform-changelogs${qs ? `?${qs}` : ""}`;
 
   useEffect(() => {
-    const params = new URLSearchParams();
-    if (organizationId) params.set("organizationId", organizationId);
-    if (projectId) params.set("projectId", projectId);
-    const qs = params.toString();
-    const url = `/resources/platform-changelogs${qs ? `?${qs}` : ""}`;
-
     if (lastLoadedUrl.current !== url && state === "idle") {
       lastLoadedUrl.current = url;
       load(url);
     }
+  }, [load, state, url]);
 
+  useEffect(() => {
     const interval = setInterval(() => {
-      if (state === "idle") {
+      if (stateRef.current === "idle") {
         load(url);
       }
     }, POLL_INTERVAL_MS);
 
     return () => clearInterval(interval);
-  }, [organizationId, projectId, load, state]);
+  }, [load, stateRef, url]);
 
   return {
     changelogs: fetcher.data?.changelogs ?? [],

apps/webapp/app/routes/resources.platform-notifications.tsx

@@ -2,6 +2,7 @@ import { json } from "@remix-run/node";
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import { useFetcher, type ShouldRevalidateFunction } from "@remix-run/react";
 import { useEffect, useRef } from "react";
+import { useLatest } from "react-use";
 import { requireUserId } from "~/services/session.server";
 import {
   getActivePlatformNotifications,
@@ -42,24 +43,26 @@ const POLL_INTERVAL_MS = 60000; // 1 minute
 export function usePlatformNotifications(organizationId: string, projectId: string) {
   const fetcher = useFetcher<typeof loader>();
   const { load, state } = fetcher;
+  const stateRef = useLatest(state);
   const lastLoadedUrl = useRef<string | null>(null);
+  const url = `/resources/platform-notifications?organizationId=${encodeURIComponent(organizationId)}&projectId=${encodeURIComponent(projectId)}`;
 
   useEffect(() => {
-    const url = `/resources/platform-notifications?organizationId=${encodeURIComponent(organizationId)}&projectId=${encodeURIComponent(projectId)}`;
-
     if (lastLoadedUrl.current !== url && state === "idle") {
       lastLoadedUrl.current = url;
       load(url);
     }
+  }, [load, state, url]);
 
+  useEffect(() => {
     const interval = setInterval(() => {
-      if (state === "idle") {
+      if (stateRef.current === "idle") {
         load(url);
       }
     }, POLL_INTERVAL_MS);
 
     return () => clearInterval(interval);
-  }, [organizationId, projectId, load, state]);
+  }, [load, stateRef, url]);
 
   return {
     notifications: fetcher.data?.notifications ?? [],