Replace the sse-based autoreload in bulk actions and queues page with the simpler autoRevalidate hook

Author: myftija

apps/webapp/app/env.server.ts

@@ -1028,10 +1028,9 @@ const EnvironmentSchema = z
     TASK_EVENT_PARTITIONING_ENABLED: z.string().default("0"),
     TASK_EVENT_PARTITIONED_WINDOW_IN_SECONDS: z.coerce.number().int().default(60), // 1 minute
 
-    QUEUE_SSE_AUTORELOAD_INTERVAL_MS: z.coerce.number().int().default(5_000),
-    QUEUE_SSE_AUTORELOAD_TIMEOUT_MS: z.coerce.number().int().default(60_000),
-
     DEPLOYMENTS_AUTORELOAD_POLL_INTERVAL_MS: z.coerce.number().int().default(5_000),
+    BULK_ACTION_AUTORELOAD_POLL_INTERVAL_MS: z.coerce.number().int().default(1_000),
+    QUEUES_AUTORELOAD_POLL_INTERVAL_MS: z.coerce.number().int().default(5_000),
 
     SLACK_BOT_TOKEN: z.string().optional(),
     SLACK_SIGNUP_REASON_CHANNEL_ID: z.string().optional(),

apps/webapp/app/hooks/useAutoRevalidate.ts

@@ -4,14 +4,15 @@ import { useEffect } from "react";
 type UseAutoRevalidateOptions = {
   interval?: number; // in milliseconds
   onFocus?: boolean;
+  disabled?: boolean;
 };
 
 export function useAutoRevalidate(options: UseAutoRevalidateOptions = {}) {
-  const { interval = 5000, onFocus = true } = options;
+  const { interval = 5000, onFocus = true, disabled = false } = options;
   const revalidator = useRevalidator();
 
   useEffect(() => {
-    if (!interval || interval <= 0) return;
+    if (!interval || interval <= 0 || disabled) return;
 
     const intervalId = setInterval(() => {
       if (revalidator.state === "loading") {
@@ -21,10 +22,10 @@ export function useAutoRevalidate(options: UseAutoRevalidateOptions = {}) {
     }, interval);
 
     return () => clearInterval(intervalId);
-  }, [interval]);
+  }, [interval, disabled]);
 
   useEffect(() => {
-    if (!onFocus) return;
+    if (!onFocus || disabled) return;
 
     const handleFocus = () => {
       if (document.visibilityState === "visible" && revalidator.state !== "loading") {
@@ -41,7 +42,7 @@ export function useAutoRevalidate(options: UseAutoRevalidateOptions = {}) {
       document.removeEventListener("visibilitychange", handleFocus);
       window.removeEventListener("focus", handleFocus);
     };
-  }, [onFocus]);
+  }, [onFocus, disabled]);
 
   return revalidator;
 }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions.$bulkActionParam/route.tsx

@@ -1,10 +1,9 @@
 import { ArrowPathIcon } from "@heroicons/react/20/solid";
-import { Form, useRevalidator } from "@remix-run/react";
+import { Form } from "@remix-run/react";
 import { type ActionFunctionArgs, type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { tryCatch } from "@trigger.dev/core";
 import type { BulkActionType } from "@trigger.dev/database";
 import { motion } from "framer-motion";
-import { useEffect } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { ExitIcon } from "~/assets/icons/ExitIcon";
@@ -18,8 +17,9 @@ import { Paragraph } from "~/components/primitives/Paragraph";
 import * as Property from "~/components/primitives/PropertyTable";
 import { BulkActionStatusCombo, BulkActionTypeCombo } from "~/components/runs/v3/BulkAction";
 import { UserAvatar } from "~/components/UserProfilePhoto";
+import { env } from "~/env.server";
+import { useAutoRevalidate } from "~/hooks/useAutoRevalidate";
 import { useEnvironment } from "~/hooks/useEnvironment";
-import { useEventSource } from "~/hooks/useEventSource";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
@@ -72,7 +72,9 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       throw new Error(error.message);
     }
 
-    return typedjson({ bulkAction: data });
+    const autoReloadPollIntervalMs = env.BULK_ACTION_AUTORELOAD_POLL_INTERVAL_MS;
+
+    return typedjson({ bulkAction: data, autoReloadPollIntervalMs });
   } catch (error) {
     console.error(error);
     throw new Response(undefined, {
@@ -130,30 +132,16 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
 };
 
 export default function Page() {
-  const { bulkAction } = useTypedLoaderData<typeof loader>();
+  const { bulkAction, autoReloadPollIntervalMs } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
 
-  const disabled = bulkAction.status !== "PENDING";
-
-  const streamedEvents = useEventSource(
-    `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.id}/runs/bulkaction/${bulkAction.friendlyId}/stream`,
-    {
-      event: "progress",
-      disabled,
-    }
-  );
-
-  const revalidation = useRevalidator();
-
-  useEffect(() => {
-    if (disabled || streamedEvents === null) {
-      return;
-    }
-
-    revalidation.revalidate();
-  }, [streamedEvents, disabled]);
+  useAutoRevalidate({
+    interval: autoReloadPollIntervalMs,
+    onFocus: true,
+    disabled: bulkAction.status !== "PENDING",
+  });
 
   return (
     <div className="grid h-full max-h-full grid-rows-[2.5rem_2.5rem_1fr_3.25rem] overflow-hidden bg-background-bright">

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx

@@ -8,14 +8,7 @@ import {
   RectangleStackIcon,
 } from "@heroicons/react/20/solid";
 import { DialogClose } from "@radix-ui/react-dialog";
-import {
-  Form,
-  useNavigate,
-  useNavigation,
-  useRevalidator,
-  useSearchParams,
-  type MetaFunction,
-} from "@remix-run/react";
+import { Form, useNavigation, useSearchParams, type MetaFunction } from "@remix-run/react";
 import { type ActionFunctionArgs, type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import type { RuntimeEnvironmentType } from "@trigger.dev/database";
 import { useEffect, useState } from "react";
@@ -30,7 +23,7 @@ import { Feedback } from "~/components/Feedback";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { BigNumber } from "~/components/metrics/BigNumber";
 import { Badge } from "~/components/primitives/Badge";
-import { Button, ButtonVariant, LinkButton } from "~/components/primitives/Buttons";
+import { Button, type ButtonVariant, LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
 import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "~/components/primitives/Dialog";
 import { FormButtons } from "~/components/primitives/FormButtons";
@@ -56,7 +49,6 @@ import {
   TooltipTrigger,
 } from "~/components/primitives/Tooltip";
 import { useEnvironment } from "~/hooks/useEnvironment";
-import { useEventSource } from "~/hooks/useEventSource";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
@@ -74,6 +66,8 @@ import { Header3 } from "~/components/primitives/Headers";
 import { Input } from "~/components/primitives/Input";
 import { useThrottle } from "~/hooks/useThrottle";
 import { RunsIcon } from "~/assets/icons/RunsIcon";
+import { useAutoRevalidate } from "~/hooks/useAutoRevalidate";
+import { env } from "~/env.server";
 
 const SearchParamsSchema = z.object({
   query: z.string().optional(),
@@ -121,9 +115,12 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 
     const environmentQueuePresenter = new EnvironmentQueuePresenter();
 
+    const autoReloadPollIntervalMs = env.QUEUES_AUTORELOAD_POLL_INTERVAL_MS;
+
     return typedjson({
       ...queues,
       environment: await environmentQueuePresenter.call(environment),
+      autoReloadPollIntervalMs,
     });
   } catch (error) {
     console.error(error);
@@ -217,28 +214,23 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
 };
 
 export default function Page() {
-  const { environment, queues, success, pagination, code, totalQueues, hasFilters } =
-    useTypedLoaderData<typeof loader>();
+  const {
+    environment,
+    queues,
+    success,
+    pagination,
+    code,
+    totalQueues,
+    hasFilters,
+    autoReloadPollIntervalMs,
+  } = useTypedLoaderData<typeof loader>();
 
   const organization = useOrganization();
   const project = useProject();
   const env = useEnvironment();
   const plan = useCurrentPlan();
 
-  // Reload the page periodically
-  const streamedEvents = useEventSource(
-    `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${env.slug}/queues/stream`,
-    {
-      event: "update",
-    }
-  );
-
-  const revalidation = useRevalidator();
-  useEffect(() => {
-    if (streamedEvents) {
-      revalidation.revalidate();
-    }
-  }, [streamedEvents]);
+  useAutoRevalidate({ interval: autoReloadPollIntervalMs, onFocus: true });
 
   const limitStatus =
     environment.running === environment.concurrencyLimit * environment.burstFactor