fix(feed): a channel filter's chips name their channels from the first paint

After a reload the chips (filter panel and the row above the feed) read as
raw UC… ids until the subscription list landed. The names seen last time
are now kept per account (useChannelNames) and name the chips at once; the
list then replaces the copy, so a renamed or dropped channel heals. A
channel never named on this browser draws a placeholder bone while the
list loads; a failed list still falls back to the id.

frontend/src/components/ui/Skeleton.tsx

@@ -7,15 +7,32 @@ import { SURFACE } from "./surfaces";
 // paragraph's, for prose that arrives after its page). The
 // shapes are shown through `LoadingState shape=…`, which owns the 300 ms reveal and the status role.
 
-export function Skeleton({ className }: { className?: string }) {
+export function Skeleton({ className, inline = false }: { className?: string; inline?: boolean }) {
+  // Inline: a span, for a bone inside phrasing content (a chip is a button, which may not hold a div).
+  const Tag = inline ? "span" : "div";
   return (
-    <div
+    <Tag
       aria-hidden="true"
-      className={clsx("rounded-lg bg-fg/8 animate-pulse motion-reduce:animate-none", className)}
+      className={clsx(
+        "rounded-lg bg-fg/8 animate-pulse motion-reduce:animate-none",
+        inline && "inline-block align-middle",
+        className,
+      )}
     />
   );
 }
 
+/** A chip whose name is still on its way: a name-sized bone, not the raw value (a channel's UC… id).
+ *  A screen reader still gets the value, so two such chips stay told apart. */
+export function ChipLabelPending({ value }: { value: string }) {
+  return (
+    <>
+      <Skeleton inline className="h-3 w-20" />
+      <span className="sr-only">{value}</span>
+    </>
+  );
+}
+
 export type SkeletonShape = "grid" | "poster" | "list" | "table" | "text";
 
 const COUNT: Record<SkeletonShape, number> = { grid: 8, poster: 12, list: 6, table: 8, text: 5 };