fix(webapp): don't reload runs list when toggling bulk action inspector

kathiekiwi · kathiekiwi · commit 8d32f34f00da · 2026-06-05T10:06:13.000Z
Prevent runs list revalidation and loading states when toggling the
bulk action inspector. Filter, pagination, and explicit refresh
behavior are unchanged.
diff --git a/.server-changes/runs-bulk-action-no-reload.md b/.server-changes/runs-bulk-action-no-reload.md
@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Stop reloading the runs list when opening or closing the bulk action inspector
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs._index/route.tsx
@@ -1,7 +1,7 @@
 import { BeakerIcon, BookOpenIcon } from "@heroicons/react/24/solid";
 import { type MetaFunction, useNavigation, useRevalidator } from "@remix-run/react";
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { Suspense } from "react";
+import { Suspense, useEffect, useState } from "react";
 import {
   TypedAwait,
   typeddefer,
@@ -26,6 +26,7 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
   collapsibleHandleClassName,
+  useFrozenValue,
 } from "~/components/primitives/Resizable";
 import { SelectedItemsProvider } from "~/components/primitives/SelectedItemsProvider";
 import { ShortcutKey } from "~/components/primitives/ShortcutKey";
@@ -39,6 +40,7 @@ import { $replica } from "~/db.server";
 import { useEnvironment } from "~/hooks/useEnvironment";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
+import { useOptimisticLocation } from "~/hooks/useOptimisticLocation";
 import { useSearchParams } from "~/hooks/useSearchParam";
 import { useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { redirectWithErrorMessage } from "~/models/message.server";
@@ -56,7 +58,6 @@ import { cn } from "~/utils/cn";
 import {
   docsPath,
   EnvironmentParamSchema,
-  v3CreateBulkActionPath,
   v3ProjectPath,
   v3TestPath,
   v3TestTaskPath,
@@ -65,8 +66,11 @@ import { throwNotFound } from "~/utils/httpErrors";
 import { ListPagination } from "../../components/ListPagination";
 import { CreateBulkActionInspector } from "../resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.bulkaction";
 import { Callout } from "~/components/primitives/Callout";
+import { isRunsListLoading, shouldRevalidateRunsList } from "./shouldRevalidateRunsList";
 import { useRunsLiveReload } from "./useRunsLiveReload";
 
+export { shouldRevalidateRunsList as shouldRevalidate };
+
 export const meta: MetaFunction = () => {
   return [
     {
@@ -209,8 +213,9 @@ function RunsList({
   filters: TaskRunListSearchFilters;
 }) {
   const revalidator = useRevalidator();
+  const location = useOptimisticLocation();
   const navigation = useNavigation();
-  const isLoading = navigation.state !== "idle";
+  const isLoading = isRunsListLoading(navigation, location.search);
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
@@ -244,7 +249,7 @@ function RunsList({
     shortcut: { key: "r" },
     action: (e) => {
       replace({
-        bulkInspector: "true",
+        bulkInspector: "show",
         action: "replay",
         mode: selectedItems.size > 0 ? "selected" : undefined,
       });
@@ -254,14 +259,28 @@ function RunsList({
     shortcut: { key: "c" },
     action: (e) => {
       replace({
-        bulkInspector: "true",
+        bulkInspector: "show",
         action: "cancel",
         mode: selectedItems.size > 0 ? "selected" : undefined,
       });
     },
   });
 
   const isShowingBulkActionInspector = has("bulkInspector") && list.hasAnyRuns;
+  const [isBulkInspectorPanelCollapsed, setIsBulkInspectorPanelCollapsed] = useState(
+    !isShowingBulkActionInspector
+  );
+  const frozenShowBulkInspector = useFrozenValue(isShowingBulkActionInspector || undefined);
+  const showBulkInspectorContent =
+    isShowingBulkActionInspector ||
+    (frozenShowBulkInspector === true && !isBulkInspectorPanelCollapsed);
+
+  useEffect(() => {
+    if (isShowingBulkActionInspector) {
+      setIsBulkInspectorPanelCollapsed(false);
+    }
+  }, [isShowingBulkActionInspector]);
+
   return (
     <ResizablePanelGroup orientation="horizontal" className="max-h-full">
       <ResizablePanel id="runs-main" min={"100px"}>
@@ -310,39 +329,39 @@ function RunsList({
                         </Button>
                       </span>
                     )}
-                    {!isShowingBulkActionInspector && (
-                      <LinkButton
-                        variant="secondary/small"
-                        to={v3CreateBulkActionPath(
-                          organization,
-                          project,
-                          environment,
-                          filters,
-                          selectedItems.size > 0 ? "selected" : undefined
-                        )}
-                        LeadingIcon={ListCheckedIcon}
-                        className={selectedItems.size > 0 ? "pr-1" : undefined}
-                        tooltip={
-                          <div className="-mr-1 flex items-center gap-3 text-xs text-text-dimmed">
-                            <div className="flex items-center gap-0.5">
-                              <span>Replay</span>
-                              <ShortcutKey shortcut={{ key: "r" }} variant={"small"} />
-                            </div>
-                            <div className="flex items-center gap-0.5">
-                              <span>Cancel</span>
-                              <ShortcutKey shortcut={{ key: "c" }} variant={"small"} />
-                            </div>
+                    <Button
+                      variant="secondary/small"
+                      onClick={() =>
+                        replace({
+                          bulkInspector: "show",
+                          mode: selectedItems.size > 0 ? "selected" : undefined,
+                        })
+                      }
+                      LeadingIcon={ListCheckedIcon}
+                      className={cn(
+                        selectedItems.size > 0 ? "pr-1" : undefined,
+                        isShowingBulkActionInspector && "pointer-events-none invisible"
+                      )}
+                      tooltip={
+                        <div className="-mr-1 flex items-center gap-3 text-xs text-text-dimmed">
+                          <div className="flex items-center gap-0.5">
+                            <span>Replay</span>
+                            <ShortcutKey shortcut={{ key: "r" }} variant={"small"} />
                           </div>
-                        }
-                      >
-                        <span className="flex items-center gap-x-1 whitespace-nowrap text-text-bright">
-                          <span>Bulk action</span>
-                          {selectedItems.size > 0 && (
-                            <Badge variant="rounded">{selectedItems.size}</Badge>
-                          )}
-                        </span>
-                      </LinkButton>
-                    )}
+                          <div className="flex items-center gap-0.5">
+                            <span>Cancel</span>
+                            <ShortcutKey shortcut={{ key: "c" }} variant={"small"} />
+                          </div>
+                        </div>
+                      }
+                    >
+                      <span className="flex items-center gap-x-1 whitespace-nowrap text-text-bright">
+                        <span>Bulk action</span>
+                        {selectedItems.size > 0 && (
+                          <Badge variant="rounded">{selectedItems.size}</Badge>
+                        )}
+                      </span>
+                    </Button>
                     <ListPagination list={list} />
                   </div>
                 </div>
@@ -374,12 +393,12 @@ function RunsList({
         className="overflow-hidden"
         collapsible
         collapsed={!isShowingBulkActionInspector}
-        onCollapseChange={() => {}}
+        onCollapseChange={setIsBulkInspectorPanelCollapsed}
         collapsedSize="0px"
         collapseAnimation={RESIZABLE_PANEL_ANIMATION}
       >
         <div className="h-full" style={{ minWidth: 400 }}>
-          {isShowingBulkActionInspector && (
+          {showBulkInspectorContent && (
             <CreateBulkActionInspector
               filters={filters}
               selectedItems={selectedItems}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs._index/shouldRevalidateRunsList.ts b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs._index/shouldRevalidateRunsList.ts
@@ -0,0 +1,60 @@
+import type { Navigation, ShouldRevalidateFunction } from "@remix-run/react";
+
+/** Search params that only control the bulk-action inspector UI, not list data. */
+export const RUNS_BULK_INSPECTOR_UI_SEARCH_PARAMS = ["bulkInspector", "action", "mode"] as const;
+
+export function searchParamsEqualIgnoringBulkInspectorUiState(
+  current: URLSearchParams,
+  next: URLSearchParams
+) {
+  const currentFiltered = new URLSearchParams(current);
+  const nextFiltered = new URLSearchParams(next);
+  for (const key of RUNS_BULK_INSPECTOR_UI_SEARCH_PARAMS) {
+    currentFiltered.delete(key);
+    nextFiltered.delete(key);
+  }
+  return currentFiltered.toString() === nextFiltered.toString();
+}
+
+/** True when navigation should show the runs table loading state (excludes bulk-inspector UI toggles). */
+export function isRunsListLoading(navigation: Navigation, currentSearch: string): boolean {
+  if (navigation.state === "idle" || !navigation.location) {
+    return false;
+  }
+
+  const currentParams = new URLSearchParams(currentSearch);
+  const nextParams = new URLSearchParams(navigation.location.search);
+
+  if (searchParamsEqualIgnoringBulkInspectorUiState(currentParams, nextParams)) {
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * Skip runs list loader revalidation when only bulk-inspector UI params change.
+ * Explicit revalidate() (unchanged URL) and filter/pagination changes still revalidate.
+ */
+export const shouldRevalidateRunsList: ShouldRevalidateFunction = ({
+  currentUrl,
+  nextUrl,
+  defaultShouldRevalidate,
+}) => {
+  if (currentUrl.pathname !== nextUrl.pathname) {
+    return defaultShouldRevalidate;
+  }
+
+  const currentParams = new URLSearchParams(currentUrl.search);
+  const nextParams = new URLSearchParams(nextUrl.search);
+
+  if (currentParams.toString() === nextParams.toString()) {
+    return defaultShouldRevalidate;
+  }
+
+  if (searchParamsEqualIgnoringBulkInspectorUiState(currentParams, nextParams)) {
+    return false;
+  }
+
+  return defaultShouldRevalidate;
+};
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.bulkaction.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.bulkaction.tsx
@@ -23,7 +23,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "~/components/primitives/Accordion";
-import { Button, LinkButton } from "~/components/primitives/Buttons";
+import { Button } from "~/components/primitives/Buttons";
 import { CheckboxWithLabel } from "~/components/primitives/Checkbox";
 import {
   Dialog,
@@ -54,7 +54,7 @@ import { CreateBulkActionPresenter } from "~/presenters/v3/CreateBulkActionPrese
 import { logger } from "~/services/logger.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
-import { EnvironmentParamSchema, v3BulkActionPath, v3RunsPath } from "~/utils/pathBuilder";
+import { EnvironmentParamSchema, v3BulkActionPath } from "~/utils/pathBuilder";
 import { BulkActionService } from "~/v3/services/bulk/BulkActionV2.server";
 
 export async function loader({ request, params }: LoaderFunctionArgs) {
@@ -187,7 +187,7 @@ export function CreateBulkActionInspector({
   const project = useProject();
   const environment = useEnvironment();
   const fetcher = useTypedFetcher<typeof loader>();
-  const { value, replace } = useSearchParams();
+  const { value, replace, del } = useSearchParams();
   const [action, setAction] = useState<BulkActionAction>(
     bulkActionActionFromString(value("action"))
   );
@@ -208,9 +208,6 @@ export function CreateBulkActionInspector({
 
   const data = fetcher.data != null ? fetcher.data : undefined;
 
-  const closedSearchParams = new URLSearchParams(location.search);
-  closedSearchParams.delete("bulkInspector");
-
   const impactedCountElement =
     mode === "selected" ? selectedItems.size : <EstimatedCount count={data?.count} />;
 
@@ -225,13 +222,10 @@ export function CreateBulkActionInspector({
       <div className="grid h-full max-h-full grid-rows-[2.5rem_1fr_3.25rem] overflow-hidden bg-background-bright">
         <div className="mx-3 flex items-center justify-between gap-2 border-b border-grid-dimmed">
           <Header2 className="whitespace-nowrap">Create a bulk action</Header2>
-          <LinkButton
-            to={`${v3RunsPath(
-              organization,
-              project,
-              environment
-            )}?${closedSearchParams.toString()}`}
+          <Button
+            type="button"
             variant="minimal/small"
+            onClick={() => del(["bulkInspector", "action", "mode"])}
             TrailingIcon={ExitIcon}
             shortcut={{ key: "esc" }}
             shortcutPosition="before-trailing-icon"
diff --git a/apps/webapp/test/shouldRevalidateRunsList.test.ts b/apps/webapp/test/shouldRevalidateRunsList.test.ts
