perf(mobile): project favicons mount their image in one commit (#26047)

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

Author: juliusmarminge

apps/mobile/src/components/ProjectFavicon.test.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+import { act, Profiler } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it, vi } from "vite-plus/test";
+
+const harness = vi.hoisted(() => ({
+  Passthrough: ({ children }: { children?: unknown }) => children,
+}));
+
+vi.mock("react-native", () => ({ View: harness.Passthrough }));
+vi.mock("expo-image", () => ({ Image: () => <img alt="" /> }));
+vi.mock("./ui/AppSymbol", () => ({ SymbolView: () => null }));
+vi.mock("./ui/AppText", () => ({
+  AppText: ({ children }: { children?: ReactNode }) => <span>{children}</span>,
+}));
+vi.mock("../state/assets", async () => {
+  const { Atom } = await import("effect/reactivity");
+  const url = Atom.make<string | null>("https://example.test/favicon.png");
+  return { projectFaviconUrlAtom: () => url };
+});
+
+import { EnvironmentId } from "@t3tools/contracts";
+
+import { ProjectFavicon } from "./ProjectFavicon";
+
+it("mounts the favicon image in the first commit", async () => {
+  (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  const container = document.createElement("div");
+  const root = createRoot(container);
+  const commits: string[] = [];
+  try {
+    await act(async () =>
+      root.render(
+        <Profiler id="favicon" onRender={(_id, phase) => commits.push(phase)}>
+          <ProjectFavicon
+            environmentId={EnvironmentId.make("env-1")}
+            projectTitle="Project"
+            workspaceRoot="/repo"
+          />
+        </Profiler>,
+      ),
+    );
+    expect(container.querySelector("img")).not.toBeNull();
+    expect(commits).toEqual(["mount"]);
+  } finally {
+    await act(async () => root.unmount());
+  }
+});

apps/mobile/src/components/ProjectFavicon.tsx

@@ -163,14 +163,11 @@ function ProjectFaviconImage(props: {
     () => createProjectFaviconRequest(props.cacheKey, props.faviconUrl),
     [props.cacheKey, props.faviconUrl],
   );
-  const [activeFaviconRequest, setActiveFaviconRequest] = useState<typeof faviconRequest>(null);
+  // Registers with the module-level loader before the Image's native onLoad/onError can fire,
+  // so stale loads for a superseded URL under the same cacheKey are ignored.
   useLayoutEffect(() => {
     if (faviconRequest === null) return;
-
-    const endRequest = beginProjectFaviconRequest(faviconRequest);
-    // oxlint-disable-next-line react/set-state-in-effect -- Publishes the favicon request registered with the external loader until its cleanup runs.
-    setActiveFaviconRequest(faviconRequest);
-    return endRequest;
+    return beginProjectFaviconRequest(faviconRequest);
   }, [faviconRequest]);
 
   const [status, setStatus] = useState<"loading" | "loaded" | "error">(() =>
@@ -179,8 +176,7 @@ function ProjectFaviconImage(props: {
       : "loading",
   );
 
-  const requestIsActive = faviconRequest !== null && activeFaviconRequest === faviconRequest;
-  const showImage = requestIsActive && status === "loaded";
+  const showImage = faviconRequest !== null && status === "loaded";
   const fallbackGlyph = showImage ? null : projectAutoMonogram(props.projectTitle);
 
   return (
@@ -203,7 +199,7 @@ function ProjectFaviconImage(props: {
         />
       )}
 
-      {requestIsActive ? (
+      {faviconRequest !== null ? (
         <Image
           key={faviconRequest.faviconUrl}
           source={

apps/mobile/vite.config.ts

@@ -12,6 +12,7 @@ const reactTests = [
   "src/features/threads/thread-inspector-navigation.test.tsx",
   "src/features/diffs/nativeReviewDiffSurface.test.tsx",
   "src/features/pull-requests/usePullRequestDiff.test.tsx",
+  "src/components/ProjectFavicon.test.tsx",
   "src/components/ui/Dialog.android.test.tsx",
   "src/features/pull-requests/guide/useReviewGuide.test.tsx",
   "src/features/settings/SettingsServerControlsRouteScreen.test.tsx",