Skip creature-type filter animation delay in NamedChoiceModal (#4832)

client/src/components/modal/NamedChoiceModal.tsx

@@ -239,6 +239,8 @@ function ButtonGrid({ data, typeKey }: { data: NamedChoice["data"]; typeKey: str
     return data.options.filter((option) => option.toLowerCase().includes(lower));
   }, [showFilter, query, data.options]);
 
+  const isFiltering = showFilter && query.trim() !== "";
+
   return (
     <ChoiceOverlay
       title={title}
@@ -289,9 +291,13 @@ function ButtonGrid({ data, typeKey }: { data: NamedChoice["data"]; typeKey: str
                   ? "border-emerald-400 bg-emerald-500/30 text-white"
                   : "border-gray-600 bg-gray-800/80 text-gray-300 hover:border-gray-400 hover:text-white"
               }`}
-              initial={{ opacity: 0, y: 20, scale: 0.95 }}
+              initial={isFiltering ? false : { opacity: 0, y: 20, scale: 0.95 }}
               animate={{ opacity: 1, y: 0, scale: 1 }}
-              transition={{ delay: 0.05 + index * 0.03, duration: 0.25 }}
+              transition={
+                isFiltering
+                  ? { duration: 0 }
+                  : { delay: Math.min(0.05 + index * 0.03, 0.3), duration: 0.25 }
+              }
               whileHover={{ scale: 1.05 }}
               onClick={onClick}
             >

client/src/components/modal/__tests__/NamedChoiceModal.test.tsx

@@ -4,6 +4,62 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import type { WaitingFor } from "../../../adapter/types.ts";
 import { NamedChoiceModal } from "../NamedChoiceModal.tsx";
 
+vi.mock("../ChoiceOverlay.tsx", () => ({
+  ChoiceOverlay: ({
+    title,
+    children,
+    footer,
+  }: {
+    title: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+  }) => (
+    <div>
+      <h1>{title}</h1>
+      {children}
+      {footer}
+    </div>
+  ),
+  ConfirmButton: ({
+    onClick,
+    disabled,
+    label = "Confirm",
+  }: {
+    onClick?: () => void;
+    disabled?: boolean;
+    label?: string;
+  }) => (
+    <button type="button" onClick={onClick} disabled={disabled}>
+      {label}
+    </button>
+  ),
+}));
+
+vi.mock("framer-motion", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("framer-motion")>();
+  return {
+    ...actual,
+    motion: {
+      ...actual.motion,
+      button: ({
+        children,
+        onClick,
+        className,
+        style,
+      }: {
+        children: React.ReactNode;
+        onClick?: () => void;
+        className?: string;
+        style?: React.CSSProperties;
+      }) => (
+        <button type="button" className={className} style={style} onClick={onClick}>
+          {children}
+        </button>
+      ),
+    },
+  };
+});
+
 const dispatchMock = vi.fn();
 
 vi.mock("../../../hooks/useGameDispatch.ts", () => ({
@@ -38,4 +94,36 @@ describe("NamedChoiceModal", () => {
       data: { choice: "Blue" },
     });
   });
+
+  it("shows filtered creature-type options immediately", () => {
+    const creatureTypes = [
+      "Ape",
+      "Bear",
+      "Cat",
+      "Dog",
+      "Elf",
+      "Goblin",
+      "Human",
+      "Kithkin",
+      "Lizard",
+      "Merfolk",
+      "Naga",
+      "Orc",
+      "Sliver",
+    ];
+    const data: NamedChoiceData = {
+      player: 0,
+      choice_type: "CreatureType",
+      options: creatureTypes,
+    };
+
+    render(<NamedChoiceModal data={data} />);
+
+    fireEvent.change(screen.getByPlaceholderText("Filter options..."), {
+      target: { value: "sliver" },
+    });
+
+    expect(screen.getByRole("button", { name: "Sliver" })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Ape" })).not.toBeInTheDocument();
+  });
 });