fix(feed): the count pill dims while a new search's count loads

keepPreviousData held the last filter's count, and a broad word's count
takes seconds: the pill showed the old number as the new search's. It now
dims and is aria-busy until the new count lands, as AdminLogs does.

frontend/src/components/ui/ItemCount.dom.test.tsx

@@ -62,4 +62,12 @@ describe("ItemCount", () => {
     expect(text()).toBe(""); // the Layers icon carries no text
     expect(screen.getByTestId("item-count").getAttribute("title")).toBeNull();
   });
+
+  it("dims the previous filter's count and marks it busy while the new one loads", () => {
+    const { rerender } = render(<ItemCount count={5} />);
+    expect(screen.getByTestId("item-count").getAttribute("aria-busy")).toBeNull();
+    rerender(<ItemCount count={5} stale />);
+    expect(screen.getByTestId("item-count").getAttribute("aria-busy")).toBe("true");
+    expect(screen.getByText("5 items").className).toContain("opacity-60");
+  });
 });

frontend/src/components/ui/ItemCount.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { Layers } from "lucide-react";
 import { formatNumber } from "../../lib/format";
@@ -12,8 +13,10 @@ const OVERFLOW_AT = 1_000_000;
 // changing number must never shove the controls beside it, so the box is sized to the widest value
 // ("999,999 items") and the content is centred within it. A count of a million or more collapses to
 // "1M+", with the exact figure in the title tooltip. Deliberately generic ("item(s)", dynamic plural)
-// so any surface can reuse it for whatever it counts.
-export default function ItemCount({ count }: { count?: number }) {
+// so any surface can reuse it for whatever it counts. `stale`: the count is the previous filter's,
+// kept while the new one loads (keepPreviousData) — dimmed and aria-busy, as AdminLogs dims its lines,
+// so a broad search's slow count ("a": ~3 s) never reads as the new result.
+export default function ItemCount({ count, stale = false }: { count?: number; stale?: boolean }) {
   const { t, i18n } = useTranslation();
   const lang = i18n.language;
   // `count` is undefined only on a first, un-cached load — keep the fixed box (nothing shifts), just
@@ -29,10 +32,13 @@ export default function ItemCount({ count }: { count?: number }) {
     <span
       data-testid="item-count"
       title={count == null ? undefined : formatNumber(count, lang)}
+      aria-busy={stale || undefined}
       className="inline-flex h-7 min-w-[9rem] shrink-0 items-center justify-center gap-1.5 rounded-full bg-fg/8 px-3 text-sm whitespace-nowrap text-muted"
     >
       <Layers className="h-3.5 w-3.5 shrink-0 text-muted" aria-hidden="true" />
-      <span className="tabular-nums">{label}</span>
+      <span className={clsx("tabular-nums transition-opacity", stale && "opacity-60")}>
+        {label}
+      </span>
     </span>
   );
 }