From 7af07fd64d2970d5e2c71ee770b85e3ac3f8899f Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 27 Jan 2026 18:22:46 +0000
Subject: [PATCH 1/2] fix(webapp): prevent incidents URL being called every
 frame

---
 apps/webapp/app/routes/resources.incidents.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/webapp/app/routes/resources.incidents.tsx b/apps/webapp/app/routes/resources.incidents.tsx
index fbdb00a1c5..05064a5047 100644
--- a/apps/webapp/app/routes/resources.incidents.tsx
+++ b/apps/webapp/app/routes/resources.incidents.tsx
@@ -2,7 +2,7 @@ import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
 import { json } from "@remix-run/node";
 import { useFetcher } from "@remix-run/react";
 import { motion } from "framer-motion";
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { LinkButton } from "~/components/primitives/Buttons";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { Popover, PopoverContent, PopoverTrigger } from "~/components/primitives/Popover";
@@ -26,12 +26,14 @@ export async function loader() {
 export function IncidentStatusPanel({ isCollapsed = false }: { isCollapsed?: boolean }) {
   const { isManagedCloud } = useFeatures();
   const fetcher = useFetcher<typeof loader>();
+  const fetcherRef = useRef(fetcher);
+  fetcherRef.current = fetcher;
 
   const fetchIncidents = useCallback(() => {
-    if (fetcher.state === "idle") {
-      fetcher.load("/resources/incidents");
+    if (fetcherRef.current.state === "idle") {
+      fetcherRef.current.load("/resources/incidents");
     }
-  }, [fetcher]);
+  }, []);
 
   useEffect(() => {
     if (!isManagedCloud) return;

From f404373d74fa4134d532b0d6423aea8ee63827c1 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 27 Jan 2026 18:29:16 +0000
Subject: [PATCH 2/2] Remove from the dep array

---
 apps/webapp/app/routes/resources.incidents.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/apps/webapp/app/routes/resources.incidents.tsx b/apps/webapp/app/routes/resources.incidents.tsx
index 05064a5047..532038d4f9 100644
--- a/apps/webapp/app/routes/resources.incidents.tsx
+++ b/apps/webapp/app/routes/resources.incidents.tsx
@@ -2,7 +2,7 @@ import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
 import { json } from "@remix-run/node";
 import { useFetcher } from "@remix-run/react";
 import { motion } from "framer-motion";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect } from "react";
 import { LinkButton } from "~/components/primitives/Buttons";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { Popover, PopoverContent, PopoverTrigger } from "~/components/primitives/Popover";
@@ -26,12 +26,10 @@ export async function loader() {
 export function IncidentStatusPanel({ isCollapsed = false }: { isCollapsed?: boolean }) {
   const { isManagedCloud } = useFeatures();
   const fetcher = useFetcher<typeof loader>();
-  const fetcherRef = useRef(fetcher);
-  fetcherRef.current = fetcher;
 
   const fetchIncidents = useCallback(() => {
-    if (fetcherRef.current.state === "idle") {
-      fetcherRef.current.load("/resources/incidents");
+    if (fetcher.state === "idle") {
+      fetcher.load("/resources/incidents");
     }
   }, []);