fix(webapp): show a per-row spinner while a webhook sample or replay payload loads

Clicking a sample event or a past delivery in the webhook console now shows a spinner on that row while its payload loads. The pickers derived the in-flight row from a form action that a fetcher load never sets, so the spinner never appeared; they now track the clicked id in local state.

Author: ericallam

apps/webapp/app/components/webhookConsole/ReplaySourcePicker.tsx

@@ -1,5 +1,5 @@
 import { type WebhookDeliveryStatus } from "@trigger.dev/database";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useTypedFetcher } from "remix-typedjson";
 import { DateTime } from "~/components/primitives/DateTime";
 import { Spinner } from "~/components/primitives/Spinner";
@@ -33,13 +33,10 @@ export function ReplaySourcePicker({
     listFetcher.state === "loading" ||
     (listFetcher.data === undefined && listFetcher.state !== "idle");
   const list = listFetcher.data?.kind === "list" ? listFetcher.data.deliveries : [];
-  const loadingDeliveryId =
-    payloadFetcher.state !== "idle"
-      ? (new URLSearchParams(payloadFetcher.formAction?.split("?")[1] ?? "").get("deliveryId") ??
-        undefined)
-      : undefined;
+  const [loadingDeliveryId, setLoadingDeliveryId] = useState<string | undefined>(undefined);
 
   function selectDelivery(friendlyId: string) {
+    setLoadingDeliveryId(friendlyId);
     payloadFetcher.load(`${replaySourcePath}?deliveryId=${encodeURIComponent(friendlyId)}`);
   }
 
@@ -79,7 +76,7 @@ export function ReplaySourcePicker({
                 <span className="text-xxs text-text-dimmed">
                   <DateTime date={new Date(delivery.createdAt)} />
                 </span>
-                {loadingDeliveryId === delivery.friendlyId ? (
+                {payloadFetcher.state !== "idle" && loadingDeliveryId === delivery.friendlyId ? (
                   <Spinner className="size-3.5" />
                 ) : (
                   <DeliveryStatusBadge status={delivery.status as WebhookDeliveryStatus} />

apps/webapp/app/components/webhookConsole/SampleSourcePicker.tsx

@@ -79,13 +79,10 @@ export function SampleSourcePicker({
       return !query || item.eventType.toLowerCase().includes(query);
     });
 
-  const loadingEventType =
-    bodyFetcher.state !== "idle"
-      ? (new URLSearchParams(bodyFetcher.formAction?.split("?")[1] ?? "").get("eventType") ??
-        undefined)
-      : undefined;
+  const [loadingEventType, setLoadingEventType] = useState<string | undefined>(undefined);
 
   function selectEvent(item: WebhookSampleMeta) {
+    setLoadingEventType(item.eventType);
     const query = new URLSearchParams({ provider: item.provider, eventType: item.eventType });
     bodyFetcher.load(`${samplesPath}?${query.toString()}`);
   }
@@ -161,7 +158,7 @@ export function SampleSourcePicker({
                   <span className="truncate font-mono text-sm text-text-bright">
                     {item.eventType}
                   </span>
-                  {loadingEventType === item.eventType ? (
+                  {bodyFetcher.state !== "idle" && loadingEventType === item.eventType ? (
                     <Spinner className="size-3.5 shrink-0" />
                   ) : null}
                 </button>