From 3b7f45831d6f506703eefe14e2451cd05adbc96e Mon Sep 17 00:00:00 2001
From: npub19x6jnl6rhepymwyl2xlltz3ce7rfg2ktllle3g2vu59n3s490k8s9n40l3
 <29b529ff43be424db89f51bff58a38cf86942acbffff98a14ce50b38c2a57d8f@sprout-oss.stage.blox.sqprod.co>
Date: Tue, 21 Jul 2026 09:25:35 -0700
Subject: [PATCH 1/6] Show uploaded avatar in onboarding modal

Co-authored-by: npub19x6jnl6rhepymwyl2xlltz3ce7rfg2ktllle3g2vu59n3s490k8s9n40l3 <29b529ff43be424db89f51bff58a38cf86942acbffff98a14ce50b38c2a57d8f@sprout-oss.stage.blox.sqprod.co>
Signed-off-by: npub19x6jnl6rhepymwyl2xlltz3ce7rfg2ktllle3g2vu59n3s490k8s9n40l3 <29b529ff43be424db89f51bff58a38cf86942acbffff98a14ce50b38c2a57d8f@sprout-oss.stage.blox.sqprod.co>
---
 .../profile/ui/ProfileAvatarEditor.pending.ts | 15 +++++++
 .../profile/ui/ProfileAvatarEditor.tsx        | 26 +++++-------
 .../profile/ui/ProfileAvatarUploadPreview.tsx | 23 ++++++++++
 desktop/tests/e2e/onboarding.spec.ts          | 42 +++++++++++++++++--
 4 files changed, 86 insertions(+), 20 deletions(-)
 create mode 100644 desktop/src/features/profile/ui/ProfileAvatarEditor.pending.ts
 create mode 100644 desktop/src/features/profile/ui/ProfileAvatarUploadPreview.tsx

diff --git a/desktop/src/features/profile/ui/ProfileAvatarEditor.pending.ts b/desktop/src/features/profile/ui/ProfileAvatarEditor.pending.ts
new file mode 100644
index 0000000000..f642dd83a5
--- /dev/null
+++ b/desktop/src/features/profile/ui/ProfileAvatarEditor.pending.ts
@@ -0,0 +1,15 @@
+export function waitForPendingButtonPaint() {
+  return new Promise<void>((resolve) => {
+    if (
+      typeof window === "undefined" ||
+      typeof window.requestAnimationFrame !== "function"
+    ) {
+      setTimeout(resolve, 0);
+      return;
+    }
+
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => setTimeout(resolve, 0));
+    });
+  });
+}
diff --git a/desktop/src/features/profile/ui/ProfileAvatarEditor.tsx b/desktop/src/features/profile/ui/ProfileAvatarEditor.tsx
index 84347d7527..23822cff10 100644
--- a/desktop/src/features/profile/ui/ProfileAvatarEditor.tsx
+++ b/desktop/src/features/profile/ui/ProfileAvatarEditor.tsx
@@ -7,12 +7,14 @@ import { flushSync } from "react-dom";
 
 import { AnimatedAvatarCapture } from "@/features/profile/ui/AnimatedAvatarCapture";
 import { AvatarCustomColorPanel } from "@/features/profile/ui/AvatarCustomColorPanel";
+import { ProfileAvatarUploadPreview } from "@/features/profile/ui/ProfileAvatarUploadPreview";
 import { ProfileAvatarModeTabs } from "@/features/profile/ui/ProfileAvatarModeTabs";
 import { useAvatarUpload } from "@/features/profile/useAvatarUpload";
 import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import { useEmojiBurst } from "@/shared/ui/EmojiBurstProvider";
 import { Spinner } from "@/shared/ui/spinner";
+import { waitForPendingButtonPaint } from "./ProfileAvatarEditor.pending";
 import {
   AVATAR_COLORS,
   AVATAR_COLOR_SWATCHES,
@@ -49,22 +51,6 @@ const DONE_BUTTON_SHELL_TRANSITION = {
   ease: [0.23, 1, 0.32, 1],
 } as const;
 
-function waitForPendingButtonPaint() {
-  return new Promise<void>((resolve) => {
-    if (
-      typeof window === "undefined" ||
-      typeof window.requestAnimationFrame !== "function"
-    ) {
-      setTimeout(resolve, 0);
-      return;
-    }
-
-    window.requestAnimationFrame(() => {
-      window.requestAnimationFrame(() => setTimeout(resolve, 0));
-    });
-  });
-}
-
 type EmojiMartEmoji = {
   native?: string;
 };
@@ -97,6 +83,7 @@ export function ProfileAvatarEditor({
   onAnimatedAvatarApply,
   onDone,
   onUploadingChange,
+  previewName,
   showEmojiColorControlsWhenEmpty = false,
   disabled,
   testIdPrefix = "profile-avatar",
@@ -624,6 +611,13 @@ export function ProfileAvatarEditor({
                     onClick={openPicker}
                     type="button"
                   >
+                    {isOnboardingModal && avatarUrl ? (
+                      <ProfileAvatarUploadPreview
+                        avatarUrl={avatarUrl}
+                        label={previewName}
+                        testId={`${testIdPrefix}-upload-preview`}
+                      />
+                    ) : null}
                     <span
                       aria-hidden="true"
                       className={cn(
diff --git a/desktop/src/features/profile/ui/ProfileAvatarUploadPreview.tsx b/desktop/src/features/profile/ui/ProfileAvatarUploadPreview.tsx
new file mode 100644
index 0000000000..81436c2c4f
--- /dev/null
+++ b/desktop/src/features/profile/ui/ProfileAvatarUploadPreview.tsx
@@ -0,0 +1,23 @@
+import { ProfileAvatar } from "@/features/profile/ui/ProfileAvatar";
+
+type ProfileAvatarUploadPreviewProps = {
+  avatarUrl: string;
+  label: string;
+  testId: string;
+};
+
+export function ProfileAvatarUploadPreview({
+  avatarUrl,
+  label,
+  testId,
+}: ProfileAvatarUploadPreviewProps) {
+  return (
+    <ProfileAvatar
+      avatarUrl={avatarUrl}
+      className="h-20 w-20 text-xl"
+      imageClassName="object-cover"
+      label={label}
+      testId={testId}
+    />
+  );
+}
diff --git a/desktop/tests/e2e/onboarding.spec.ts b/desktop/tests/e2e/onboarding.spec.ts
index 6290830a31..24e5a657cb 100644
--- a/desktop/tests/e2e/onboarding.spec.ts
+++ b/desktop/tests/e2e/onboarding.spec.ts
@@ -1313,10 +1313,35 @@ test("connected first-community profile step offers equal-width Next and Back co
     },
   );
   await installFakeCamera(page, { failRequests: 1 });
-  await installMockBridge(page, undefined, {
-    relayWsUrl: "wss://default.example.com",
-    skipOnboardingSeed: true,
-  });
+  const uploadedAvatarUrl = "https://mock.relay/media/community-avatar.png";
+  await page.route(uploadedAvatarUrl, (route) =>
+    route.fulfill({
+      body: Buffer.from(
+        "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=",
+        "base64",
+      ),
+      contentType: "image/png",
+    }),
+  );
+  await installMockBridge(
+    page,
+    {
+      uploadDescriptors: [
+        {
+          filename: "community-avatar.png",
+          sha256: "c".repeat(64),
+          size: 128,
+          type: "image/png",
+          uploaded: 1_779_900_000,
+          url: "https://mock.relay/media/community-avatar.png",
+        },
+      ],
+    },
+    {
+      relayWsUrl: "wss://default.example.com",
+      skipOnboardingSeed: true,
+    },
+  );
   await page.goto("/");
 
   await expect(page.getByTestId("community-onboarding-flow")).toBeVisible();
@@ -1432,6 +1457,15 @@ test("connected first-community profile step offers equal-width Next and Back co
     dialogBox.y + dialogBox.height,
   );
   const saveButton = page.getByTestId("community-avatar-done");
+  await page.getByTestId("community-avatar-input").setInputFiles({
+    buffer: Buffer.from("community-avatar-bytes"),
+    mimeType: "image/png",
+    name: "community-avatar.png",
+  });
+  await expect(
+    page.getByTestId("community-avatar-upload-preview-image"),
+  ).toHaveAttribute("src", uploadedAvatarUrl);
+  await expect(avatarDialog).toBeVisible();
   const modeContentShell = page.getByTestId(
     "community-avatar-mode-content-shell",
   );

From 3d8eed4935924e67ee271b2e6a7178929541dfda Mon Sep 17 00:00:00 2001
From: npub19x6jnl6rhepymwyl2xlltz3ce7rfg2ktllle3g2vu59n3s490k8s9n40l3
 <29b529ff43be424db89f51bff58a38cf86942acbffff98a14ce50b38c2a57d8f@sprout-oss.stage.blox.sqprod.co>
Date: Tue, 21 Jul 2026 09:32:16 -0700
Subject: [PATCH 2/6] Preview avatar while upload is pending

Co-authored-by: npub19x6jnl6rhepymwyl2xlltz3ce7rfg2ktllle3g2vu59n3s490k8s9n40l3 <29b529ff43be424db89f51bff58a38cf86942acbffff98a14ce50b38c2a57d8f@sprout-oss.stage.blox.sqprod.co>
Signed-off-by: npub19x6jnl6rhepymwyl2xlltz3ce7rfg2ktllle3g2vu59n3s490k8s9n40l3 <29b529ff43be424db89f51bff58a38cf86942acbffff98a14ce50b38c2a57d8f@sprout-oss.stage.blox.sqprod.co>
---
 .../profile/ui/ProfileAvatarEditor.helpers.ts | 39 +++++++++++++++++++
 .../profile/ui/ProfileAvatarEditor.pending.ts | 15 -------
 .../profile/ui/ProfileAvatarEditor.tsx        | 23 ++++++-----
 .../src/features/profile/useAvatarUpload.ts   |  8 +++-
 desktop/tests/e2e/onboarding.spec.ts          | 15 +++++--
 5 files changed, 71 insertions(+), 29 deletions(-)
 create mode 100644 desktop/src/features/profile/ui/ProfileAvatarEditor.helpers.ts
 delete mode 100644 desktop/src/features/profile/ui/ProfileAvatarEditor.pending.ts

diff --git a/desktop/src/features/profile/ui/ProfileAvatarEditor.helpers.ts b/desktop/src/features/profile/ui/ProfileAvatarEditor.helpers.ts
new file mode 100644
index 0000000000..9c03c2d37d
--- /dev/null
+++ b/desktop/src/features/profile/ui/ProfileAvatarEditor.helpers.ts
@@ -0,0 +1,39 @@
+import * as React from "react";
+
+export function waitForPendingButtonPaint() {
+  return new Promise<void>((resolve) => {
+    if (
+      typeof window === "undefined" ||
+      typeof window.requestAnimationFrame !== "function"
+    ) {
+      setTimeout(resolve, 0);
+      return;
+    }
+
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => setTimeout(resolve, 0));
+    });
+  });
+}
+
+export function useLocalAvatarPreview() {
+  const [previewUrl, setPreviewUrl] = React.useState<string | null>(null);
+  const previewUrlRef = React.useRef<string | null>(null);
+
+  const clearPreview = React.useCallback(() => {
+    if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current);
+    previewUrlRef.current = null;
+    setPreviewUrl(null);
+  }, []);
+
+  const showFilePreview = React.useCallback((file: File) => {
+    if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current);
+    const nextUrl = URL.createObjectURL(file);
+    previewUrlRef.current = nextUrl;
+    setPreviewUrl(nextUrl);
+  }, []);
+
+  React.useEffect(() => clearPreview, [clearPreview]);
+
+  return { clearPreview, previewUrl, showFilePreview };
+}
diff --git a/desktop/src/features/profile/ui/ProfileAvatarEditor.pending.ts b/desktop/src/features/profile/ui/ProfileAvatarEditor.pending.ts
deleted file mode 100644
index f642dd83a5..0000000000
--- a/desktop/src/features/profile/ui/ProfileAvatarEditor.pending.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export function waitForPendingButtonPaint() {
-  return new Promise<void>((resolve) => {
-    if (
-      typeof window === "undefined" ||
-      typeof window.requestAnimationFrame !== "function"
-    ) {
-      setTimeout(resolve, 0);
-      return;
-    }
-
-    window.requestAnimationFrame(() => {
-      window.requestAnimationFrame(() => setTimeout(resolve, 0));
-    });
-  });
-}
diff --git a/desktop/src/features/profile/ui/ProfileAvatarEditor.tsx b/desktop/src/features/profile/ui/ProfileAvatarEditor.tsx
index 23822cff10..0921bfbd9d 100644
--- a/desktop/src/features/profile/ui/ProfileAvatarEditor.tsx
+++ b/desktop/src/features/profile/ui/ProfileAvatarEditor.tsx
@@ -14,7 +14,10 @@ import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import { useEmojiBurst } from "@/shared/ui/EmojiBurstProvider";
 import { Spinner } from "@/shared/ui/spinner";
-import { waitForPendingButtonPaint } from "./ProfileAvatarEditor.pending";
+import {
+  useLocalAvatarPreview,
+  waitForPendingButtonPaint,
+} from "./ProfileAvatarEditor.helpers";
 import {
   AVATAR_COLORS,
   AVATAR_COLOR_SWATCHES,
@@ -41,7 +44,6 @@ import type {
   AvatarMode,
   ProfileAvatarEditorProps,
 } from "./ProfileAvatarEditor.types";
-
 const DONE_BUTTON_CONTENT_TRANSITION = {
   duration: 0.14,
   ease: [0.23, 1, 0.32, 1],
@@ -50,10 +52,7 @@ const DONE_BUTTON_SHELL_TRANSITION = {
   duration: 0.18,
   ease: [0.23, 1, 0.32, 1],
 } as const;
-
-type EmojiMartEmoji = {
-  native?: string;
-};
+type EmojiMartEmoji = { native?: string };
 
 const INITIAL_EMOJI_AVATAR_COLORS = AVATAR_COLORS.filter(
   (color) => color !== DEFAULT_EMOJI_AVATAR_COLOR,
@@ -102,6 +101,7 @@ export function ProfileAvatarEditor({
   const [mode, setMode] = React.useState<AvatarMode>("image");
   const [isDragging, setIsDragging] = React.useState(false);
   const [urlDraft, setUrlDraft] = React.useState("");
+  const localPreview = useLocalAvatarPreview();
   const [selectedEmoji, setSelectedEmoji] = React.useState<string | null>(
     () => initialEmojiAvatar?.emoji ?? null,
   );
@@ -186,7 +186,11 @@ export function ProfileAvatarEditor({
     isUploading,
     openPicker,
     uploadFile,
-  } = useAvatarUpload({ onUploadSuccess: handleUploadSuccess });
+  } = useAvatarUpload({
+    onUploadStart: localPreview.showFilePreview,
+    onUploadSettled: localPreview.clearPreview,
+    onUploadSuccess: handleUploadSuccess,
+  });
   const isInputDisabled = disabled || isUploading || isAnimatedApplyPending;
   const handleAnimatedApply = React.useCallback(
     (animatedUrl: string) => {
@@ -611,9 +615,10 @@ export function ProfileAvatarEditor({
                     onClick={openPicker}
                     type="button"
                   >
-                    {isOnboardingModal && avatarUrl ? (
+                    {isOnboardingModal &&
+                    (localPreview.previewUrl || avatarUrl) ? (
                       <ProfileAvatarUploadPreview
-                        avatarUrl={avatarUrl}
+                        avatarUrl={localPreview.previewUrl || avatarUrl || ""}
                         label={previewName}
                         testId={`${testIdPrefix}-upload-preview`}
                       />
diff --git a/desktop/src/features/profile/useAvatarUpload.ts b/desktop/src/features/profile/useAvatarUpload.ts
index 6ada0fc242..f3477c494e 100644
--- a/desktop/src/features/profile/useAvatarUpload.ts
+++ b/desktop/src/features/profile/useAvatarUpload.ts
@@ -11,6 +11,8 @@ const AVATAR_IMAGE_TYPES = [
 ];
 
 type UseAvatarUploadOptions = {
+  onUploadStart?: (file: File) => void;
+  onUploadSettled?: () => void;
   onUploadSuccess: (url: string) => void;
 };
 
@@ -25,6 +27,8 @@ type UseAvatarUploadReturn = {
 };
 
 export function useAvatarUpload({
+  onUploadStart,
+  onUploadSettled,
   onUploadSuccess,
 }: UseAvatarUploadOptions): UseAvatarUploadReturn {
   const inputRef = React.useRef<HTMLInputElement | null>(null);
@@ -49,6 +53,7 @@ export function useAvatarUpload({
       flushSync(() => {
         setIsUploading(true);
         setErrorMessage(null);
+        onUploadStart?.(file);
       });
 
       try {
@@ -71,9 +76,10 @@ export function useAvatarUpload({
         );
       } finally {
         setIsUploading(false);
+        onUploadSettled?.();
       }
     },
-    [onUploadSuccess],
+    [onUploadSettled, onUploadStart, onUploadSuccess],
   );
 
   const handleFileChange = React.useCallback(
diff --git a/desktop/tests/e2e/onboarding.spec.ts b/desktop/tests/e2e/onboarding.spec.ts
index 24e5a657cb..e5003ce192 100644
--- a/desktop/tests/e2e/onboarding.spec.ts
+++ b/desktop/tests/e2e/onboarding.spec.ts
@@ -1326,6 +1326,7 @@ test("connected first-community profile step offers equal-width Next and Back co
   await installMockBridge(
     page,
     {
+      uploadDelayMs: 1_000,
       uploadDescriptors: [
         {
           filename: "community-avatar.png",
@@ -1458,13 +1459,19 @@ test("connected first-community profile step offers equal-width Next and Back co
   );
   const saveButton = page.getByTestId("community-avatar-done");
   await page.getByTestId("community-avatar-input").setInputFiles({
-    buffer: Buffer.from("community-avatar-bytes"),
+    buffer: Buffer.from(
+      "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=",
+      "base64",
+    ),
     mimeType: "image/png",
     name: "community-avatar.png",
   });
-  await expect(
-    page.getByTestId("community-avatar-upload-preview-image"),
-  ).toHaveAttribute("src", uploadedAvatarUrl);
+  const previewImage = page.getByTestId(
+    "community-avatar-upload-preview-image",
+  );
+  await expect(previewImage).toHaveAttribute("src", /^blob:/);
+  await expect(saveButton).toBeDisabled();
+  await expect(previewImage).toHaveAttribute("src", uploadedAvatarUrl);
   await expect(avatarDialog).toBeVisible();
   const modeContentShell = page.getByTestId(
     "community-avatar-mode-content-shell",

From ca3ed4ecaaacaca5c2b3bc877a5b28f3310e73a5 Mon Sep 17 00:00:00 2001
From: npub19x6jnl6rhepymwyl2xlltz3ce7rfg2ktllle3g2vu59n3s490k8s9n40l3
 <29b529ff43be424db89f51bff58a38cf86942acbffff98a14ce50b38c2a57d8f@sprout-oss.stage.blox.sqprod.co>
Date: Tue, 21 Jul 2026 10:12:35 -0700
Subject: [PATCH 3/6] Keep avatar preview until relay image loads

Co-authored-by: npub19x6jnl6rhepymwyl2xlltz3ce7rfg2ktllle3g2vu59n3s490k8s9n40l3 <29b529ff43be424db89f51bff58a38cf86942acbffff98a14ce50b38c2a57d8f@sprout-oss.stage.blox.sqprod.co>
Signed-off-by: npub19x6jnl6rhepymwyl2xlltz3ce7rfg2ktllle3g2vu59n3s490k8s9n40l3 <29b529ff43be424db89f51bff58a38cf86942acbffff98a14ce50b38c2a57d8f@sprout-oss.stage.blox.sqprod.co>
---
 .../onboarding/ui/CommunityOnboardingFlow.tsx | 33 +++++++++++++++-
 .../profile/ui/ProfileAvatarEditor.helpers.ts | 39 +++++++++++++++++++
 .../profile/ui/ProfileAvatarEditor.tsx        | 37 +++++++++---------
 .../profile/ui/ProfileAvatarEditor.types.ts   |  3 ++
 desktop/tests/e2e/onboarding.spec.ts          | 26 ++++++++++---
 5 files changed, 114 insertions(+), 24 deletions(-)

diff --git a/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx b/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx
index fabd7eef83..1d0fc2508e 100644
--- a/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx
+++ b/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx
@@ -19,12 +19,14 @@ import {
   parseEmojiAvatarDataUrl,
   ProfileAvatarEditor,
 } from "@/features/profile/ui/ProfileAvatarEditor";
+import { useLocalAvatarPreview } from "@/features/profile/ui/ProfileAvatarEditor.helpers";
 import { updateProfile } from "@/shared/api/tauriProfiles";
 import { getIdentity, importIdentity } from "@/shared/api/tauriIdentity";
 import { listPersonas } from "@/shared/api/tauriPersonas";
 import { relayClient } from "@/shared/api/relayClient";
 import type { AgentPersona } from "@/shared/api/types";
 import { cn } from "@/shared/lib/cn";
+import { rewriteRelayUrl } from "@/shared/lib/mediaUrl";
 import { useSystemColorScheme } from "@/shared/theme/useSystemColorScheme";
 import { Button } from "@/shared/ui/button";
 import { Dialog, DialogContent, DialogTitle } from "@/shared/ui/dialog";
@@ -73,11 +75,15 @@ function AvatarCircle({
   onClick,
   previewName,
   triggerRef,
+  onRemoteAvatarReady,
+  remoteAvatarUrl,
 }: {
   avatarUrl: string;
   onClick: () => void;
   previewName: string;
   triggerRef?: React.Ref<HTMLButtonElement>;
+  onRemoteAvatarReady?: () => void;
+  remoteAvatarUrl?: string;
 }) {
   const emojiAvatar = parseEmojiAvatarDataUrl(avatarUrl);
   const hasAvatar = avatarUrl.trim().length > 0;
@@ -91,6 +97,15 @@ function AvatarCircle({
       ref={triggerRef}
       type="button"
     >
+      {onRemoteAvatarReady && remoteAvatarUrl ? (
+        <img
+          alt=""
+          aria-hidden="true"
+          className="pointer-events-none absolute h-px w-px opacity-0"
+          onLoad={onRemoteAvatarReady}
+          src={rewriteRelayUrl(remoteAvatarUrl)}
+        />
+      ) : null}
       {emojiAvatar ? (
         <span
           className="flex h-36 w-36 items-center justify-center overflow-hidden rounded-full text-5xl shadow-xs"
@@ -103,6 +118,7 @@ function AvatarCircle({
           avatarUrl={avatarUrl}
           className="h-36 w-36 rounded-full text-4xl"
           label={previewName}
+          testId="community-avatar-circle"
         />
       ) : (
         <span className="flex h-36 w-36 items-center justify-center rounded-full bg-white/30 text-[var(--buzz-onboarding-backup-ink)] transition-colors group-hover:bg-white/40">
@@ -145,6 +161,7 @@ export function CommunityOnboardingFlow({
   const systemColorScheme = useSystemColorScheme();
   const [displayName, setDisplayName] = React.useState("");
   const [avatarUrl, setAvatarUrl] = React.useState("");
+  const avatarPreview = useLocalAvatarPreview();
   const [isUploadingAvatar, setIsUploadingAvatar] = React.useState(false);
   const [isAvatarEditorOpen, setIsAvatarEditorOpen] = React.useState(false);
   const [starterPersonas, setStarterPersonas] = React.useState<AgentPersona[]>(
@@ -452,9 +469,15 @@ export function CommunityOnboardingFlow({
                 </div>
                 <div className="flex min-h-0 w-full flex-1 flex-col items-center justify-center pt-8">
                   <AvatarCircle
-                    avatarUrl={avatarUrl}
+                    avatarUrl={avatarPreview.previewUrl || avatarUrl}
                     onClick={() => setIsAvatarEditorOpen(true)}
+                    onRemoteAvatarReady={
+                      avatarPreview.previewUrl && avatarUrl
+                        ? avatarPreview.clearPreview
+                        : undefined
+                    }
                     previewName={displayName.trim() || "Your profile"}
+                    remoteAvatarUrl={avatarUrl}
                     triggerRef={avatarTriggerRef}
                   />
                   <label
@@ -548,11 +571,19 @@ export function CommunityOnboardingFlow({
                       emojiPickerTheme="auto"
                       emojiPickerThemeVars={NEUTRAL_EMOJI_PICKER_THEME_VARS}
                       onDone={() => setIsAvatarEditorOpen(false)}
+                      onModeChange={(mode) => {
+                        if (mode !== "image") avatarPreview.clearPreview();
+                      }}
+                      onUploadPreviewSettled={(succeeded) => {
+                        if (!succeeded) avatarPreview.clearPreview();
+                      }}
+                      onUploadPreviewStart={avatarPreview.showFilePreview}
                       onUploadingChange={setIsUploadingAvatar}
                       onUrlChange={setAvatarUrl}
                       presentation="onboarding-modal"
                       previewName={displayName.trim() || "Your profile"}
                       testIdPrefix="community-avatar"
+                      uploadPreviewUrl={avatarPreview.previewUrl}
                     />
                   </div>
                 </DialogContent>
diff --git a/desktop/src/features/profile/ui/ProfileAvatarEditor.helpers.ts b/desktop/src/features/profile/ui/ProfileAvatarEditor.helpers.ts
index 9c03c2d37d..f30788fe9a 100644
--- a/desktop/src/features/profile/ui/ProfileAvatarEditor.helpers.ts
+++ b/desktop/src/features/profile/ui/ProfileAvatarEditor.helpers.ts
@@ -1,5 +1,15 @@
 import * as React from "react";
 
+export const DONE_BUTTON_CONTENT_TRANSITION = {
+  duration: 0.14,
+  ease: [0.23, 1, 0.32, 1],
+} as const;
+
+export const DONE_BUTTON_SHELL_TRANSITION = {
+  duration: 0.18,
+  ease: [0.23, 1, 0.32, 1],
+} as const;
+
 export function waitForPendingButtonPaint() {
   return new Promise<void>((resolve) => {
     if (
@@ -16,6 +26,35 @@ export function waitForPendingButtonPaint() {
   });
 }
 
+export function useUploadPreviewLifecycle({
+  clearFallback,
+  onSettled,
+  onStart,
+  onSuccess,
+  showFallback,
+}: {
+  clearFallback: () => void;
+  onSettled?: (succeeded: boolean) => void;
+  onStart?: (file: File) => void;
+  onSuccess: (uploadedUrl: string) => void;
+  showFallback: (file: File) => void;
+}) {
+  const succeededRef = React.useRef(false);
+
+  return {
+    onUploadSettled: () =>
+      onSettled ? onSettled(succeededRef.current) : clearFallback(),
+    onUploadStart: (file: File) => {
+      succeededRef.current = false;
+      (onStart ?? showFallback)(file);
+    },
+    onUploadSuccess: (uploadedUrl: string) => {
+      succeededRef.current = true;
+      onSuccess(uploadedUrl);
+    },
+  };
+}
+
 export function useLocalAvatarPreview() {
   const [previewUrl, setPreviewUrl] = React.useState<string | null>(null);
   const previewUrlRef = React.useRef<string | null>(null);
diff --git a/desktop/src/features/profile/ui/ProfileAvatarEditor.tsx b/desktop/src/features/profile/ui/ProfileAvatarEditor.tsx
index 0921bfbd9d..ce7d0c8207 100644
--- a/desktop/src/features/profile/ui/ProfileAvatarEditor.tsx
+++ b/desktop/src/features/profile/ui/ProfileAvatarEditor.tsx
@@ -15,7 +15,10 @@ import { Button } from "@/shared/ui/button";
 import { useEmojiBurst } from "@/shared/ui/EmojiBurstProvider";
 import { Spinner } from "@/shared/ui/spinner";
 import {
+  DONE_BUTTON_CONTENT_TRANSITION,
+  DONE_BUTTON_SHELL_TRANSITION,
   useLocalAvatarPreview,
+  useUploadPreviewLifecycle,
   waitForPendingButtonPaint,
 } from "./ProfileAvatarEditor.helpers";
 import {
@@ -44,15 +47,6 @@ import type {
   AvatarMode,
   ProfileAvatarEditorProps,
 } from "./ProfileAvatarEditor.types";
-const DONE_BUTTON_CONTENT_TRANSITION = {
-  duration: 0.14,
-  ease: [0.23, 1, 0.32, 1],
-} as const;
-const DONE_BUTTON_SHELL_TRANSITION = {
-  duration: 0.18,
-  ease: [0.23, 1, 0.32, 1],
-} as const;
-type EmojiMartEmoji = { native?: string };
 
 const INITIAL_EMOJI_AVATAR_COLORS = AVATAR_COLORS.filter(
   (color) => color !== DEFAULT_EMOJI_AVATAR_COLOR,
@@ -82,6 +76,9 @@ export function ProfileAvatarEditor({
   onAnimatedAvatarApply,
   onDone,
   onUploadingChange,
+  onUploadPreviewStart,
+  onUploadPreviewSettled,
+  uploadPreviewUrl,
   previewName,
   showEmojiColorControlsWhenEmpty = false,
   disabled,
@@ -102,6 +99,7 @@ export function ProfileAvatarEditor({
   const [isDragging, setIsDragging] = React.useState(false);
   const [urlDraft, setUrlDraft] = React.useState("");
   const localPreview = useLocalAvatarPreview();
+  const activeUploadPreviewUrl = uploadPreviewUrl ?? localPreview.previewUrl;
   const [selectedEmoji, setSelectedEmoji] = React.useState<string | null>(
     () => initialEmojiAvatar?.emoji ?? null,
   );
@@ -178,6 +176,13 @@ export function ProfileAvatarEditor({
   );
   const [isAnimatedApplyPending, setIsAnimatedApplyPending] =
     React.useState(false);
+  const uploadPreviewLifecycle = useUploadPreviewLifecycle({
+    clearFallback: localPreview.clearPreview,
+    onSettled: onUploadPreviewSettled,
+    onStart: onUploadPreviewStart,
+    onSuccess: handleUploadSuccess,
+    showFallback: localPreview.showFilePreview,
+  });
   const {
     clearError: clearUploadError,
     errorMessage: uploadErrorMessage,
@@ -186,11 +191,7 @@ export function ProfileAvatarEditor({
     isUploading,
     openPicker,
     uploadFile,
-  } = useAvatarUpload({
-    onUploadStart: localPreview.showFilePreview,
-    onUploadSettled: localPreview.clearPreview,
-    onUploadSuccess: handleUploadSuccess,
-  });
+  } = useAvatarUpload(uploadPreviewLifecycle);
   const isInputDisabled = disabled || isUploading || isAnimatedApplyPending;
   const handleAnimatedApply = React.useCallback(
     (animatedUrl: string) => {
@@ -616,9 +617,9 @@ export function ProfileAvatarEditor({
                     type="button"
                   >
                     {isOnboardingModal &&
-                    (localPreview.previewUrl || avatarUrl) ? (
+                    (activeUploadPreviewUrl || avatarUrl) ? (
                       <ProfileAvatarUploadPreview
-                        avatarUrl={localPreview.previewUrl || avatarUrl || ""}
+                        avatarUrl={activeUploadPreviewUrl || avatarUrl || ""}
                         label={previewName}
                         testId={`${testIdPrefix}-upload-preview`}
                       />
@@ -770,7 +771,7 @@ export function ProfileAvatarEditor({
                       icons="outline"
                       navPosition="bottom"
                       onEmojiSelect={(
-                        emoji: EmojiMartEmoji,
+                        emoji: { native?: string },
                         event?: MouseEvent,
                       ) => {
                         if (isInputDisabled) {
@@ -933,7 +934,7 @@ export function ProfileAvatarEditor({
                 >
                   <span className="grid place-items-center">
                     <AnimatePresence initial={false}>
-                      {isDoneButtonPending ? (
+                      {isDoneButtonPending && !isOnboardingModal ? (
                         <motion.span
                           animate={{ opacity: 1, y: 0 }}
                           className="col-start-1 row-start-1 inline-flex items-center justify-center gap-2"
diff --git a/desktop/src/features/profile/ui/ProfileAvatarEditor.types.ts b/desktop/src/features/profile/ui/ProfileAvatarEditor.types.ts
index 96957a1668..f113838b69 100644
--- a/desktop/src/features/profile/ui/ProfileAvatarEditor.types.ts
+++ b/desktop/src/features/profile/ui/ProfileAvatarEditor.types.ts
@@ -14,6 +14,9 @@ export type ProfileAvatarEditorProps = {
   onModeChange?: (mode: AvatarMode) => void;
   onUploadedAvatarChange?: (url: string | null) => void;
   onUploadingChange?: (isUploading: boolean) => void;
+  uploadPreviewUrl?: string | null;
+  onUploadPreviewStart?: (file: File) => void;
+  onUploadPreviewSettled?: (succeeded: boolean) => void;
   onAnimatedAvatarApply?: (url: string) => void;
   onDone?: () => void;
   donePending?: boolean;
diff --git a/desktop/tests/e2e/onboarding.spec.ts b/desktop/tests/e2e/onboarding.spec.ts
index e5003ce192..a3ac2b4faf 100644
--- a/desktop/tests/e2e/onboarding.spec.ts
+++ b/desktop/tests/e2e/onboarding.spec.ts
@@ -1314,15 +1314,16 @@ test("connected first-community profile step offers equal-width Next and Back co
   );
   await installFakeCamera(page, { failRequests: 1 });
   const uploadedAvatarUrl = "https://mock.relay/media/community-avatar.png";
-  await page.route(uploadedAvatarUrl, (route) =>
-    route.fulfill({
+  await page.route(uploadedAvatarUrl, async (route) => {
+    await new Promise((resolve) => setTimeout(resolve, 1_000));
+    await route.fulfill({
       body: Buffer.from(
         "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=",
         "base64",
       ),
       contentType: "image/png",
-    }),
-  );
+    });
+  });
   await installMockBridge(
     page,
     {
@@ -1471,8 +1472,23 @@ test("connected first-community profile step offers equal-width Next and Back co
   );
   await expect(previewImage).toHaveAttribute("src", /^blob:/);
   await expect(saveButton).toBeDisabled();
-  await expect(previewImage).toHaveAttribute("src", uploadedAvatarUrl);
+  await expect(saveButton).toHaveText("Save");
+  const localPreviewUrl = await previewImage.getAttribute("src");
+  await expect(previewImage).toHaveAttribute("src", localPreviewUrl ?? "");
+  await saveButton.click();
+  await expect(avatarDialog).toHaveCount(0);
+  await expect(
+    page.getByTestId("community-avatar-circle-image"),
+  ).toHaveAttribute("src", localPreviewUrl ?? "");
+  await expect
+    .poll(() =>
+      page.getByTestId("community-avatar-circle-image").getAttribute("src"),
+    )
+    .not.toBe(localPreviewUrl);
+
+  await avatarButton.click();
   await expect(avatarDialog).toBeVisible();
+  await expect(previewImage).toHaveAttribute("src", uploadedAvatarUrl);
   const modeContentShell = page.getByTestId(
     "community-avatar-mode-content-shell",
   );

From f84fe649f85839e5ca64431604e612cb3a97b2a4 Mon Sep 17 00:00:00 2001
From: Logan Johnson <loganj@squareup.com>
Date: Tue, 21 Jul 2026 11:36:59 -0700
Subject: [PATCH 4/6] Centralize pending avatar presentation

---
 .../onboarding/ui/CommunityOnboardingFlow.tsx |  32 +---
 .../profile/avatarPresentationStore.ts        | 174 ++++++++++++++++++
 .../src/features/profile/ui/ProfileAvatar.tsx |  30 ++-
 .../profile/ui/ProfileAvatarEditor.helpers.ts |  21 ++-
 .../profile/ui/ProfileAvatarEditor.tsx        |  10 +-
 .../profile/ui/ProfileAvatarEditor.types.ts   |   3 -
 desktop/tests/e2e/onboarding.spec.ts          | 140 +++++++++++++-
 7 files changed, 347 insertions(+), 63 deletions(-)
 create mode 100644 desktop/src/features/profile/avatarPresentationStore.ts

diff --git a/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx b/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx
index 1d0fc2508e..331d84d7c1 100644
--- a/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx
+++ b/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx
@@ -19,14 +19,12 @@ import {
   parseEmojiAvatarDataUrl,
   ProfileAvatarEditor,
 } from "@/features/profile/ui/ProfileAvatarEditor";
-import { useLocalAvatarPreview } from "@/features/profile/ui/ProfileAvatarEditor.helpers";
 import { updateProfile } from "@/shared/api/tauriProfiles";
 import { getIdentity, importIdentity } from "@/shared/api/tauriIdentity";
 import { listPersonas } from "@/shared/api/tauriPersonas";
 import { relayClient } from "@/shared/api/relayClient";
 import type { AgentPersona } from "@/shared/api/types";
 import { cn } from "@/shared/lib/cn";
-import { rewriteRelayUrl } from "@/shared/lib/mediaUrl";
 import { useSystemColorScheme } from "@/shared/theme/useSystemColorScheme";
 import { Button } from "@/shared/ui/button";
 import { Dialog, DialogContent, DialogTitle } from "@/shared/ui/dialog";
@@ -75,15 +73,11 @@ function AvatarCircle({
   onClick,
   previewName,
   triggerRef,
-  onRemoteAvatarReady,
-  remoteAvatarUrl,
 }: {
   avatarUrl: string;
   onClick: () => void;
   previewName: string;
   triggerRef?: React.Ref<HTMLButtonElement>;
-  onRemoteAvatarReady?: () => void;
-  remoteAvatarUrl?: string;
 }) {
   const emojiAvatar = parseEmojiAvatarDataUrl(avatarUrl);
   const hasAvatar = avatarUrl.trim().length > 0;
@@ -97,15 +91,6 @@ function AvatarCircle({
       ref={triggerRef}
       type="button"
     >
-      {onRemoteAvatarReady && remoteAvatarUrl ? (
-        <img
-          alt=""
-          aria-hidden="true"
-          className="pointer-events-none absolute h-px w-px opacity-0"
-          onLoad={onRemoteAvatarReady}
-          src={rewriteRelayUrl(remoteAvatarUrl)}
-        />
-      ) : null}
       {emojiAvatar ? (
         <span
           className="flex h-36 w-36 items-center justify-center overflow-hidden rounded-full text-5xl shadow-xs"
@@ -161,7 +146,6 @@ export function CommunityOnboardingFlow({
   const systemColorScheme = useSystemColorScheme();
   const [displayName, setDisplayName] = React.useState("");
   const [avatarUrl, setAvatarUrl] = React.useState("");
-  const avatarPreview = useLocalAvatarPreview();
   const [isUploadingAvatar, setIsUploadingAvatar] = React.useState(false);
   const [isAvatarEditorOpen, setIsAvatarEditorOpen] = React.useState(false);
   const [starterPersonas, setStarterPersonas] = React.useState<AgentPersona[]>(
@@ -469,15 +453,9 @@ export function CommunityOnboardingFlow({
                 </div>
                 <div className="flex min-h-0 w-full flex-1 flex-col items-center justify-center pt-8">
                   <AvatarCircle
-                    avatarUrl={avatarPreview.previewUrl || avatarUrl}
+                    avatarUrl={avatarUrl}
                     onClick={() => setIsAvatarEditorOpen(true)}
-                    onRemoteAvatarReady={
-                      avatarPreview.previewUrl && avatarUrl
-                        ? avatarPreview.clearPreview
-                        : undefined
-                    }
                     previewName={displayName.trim() || "Your profile"}
-                    remoteAvatarUrl={avatarUrl}
                     triggerRef={avatarTriggerRef}
                   />
                   <label
@@ -571,19 +549,11 @@ export function CommunityOnboardingFlow({
                       emojiPickerTheme="auto"
                       emojiPickerThemeVars={NEUTRAL_EMOJI_PICKER_THEME_VARS}
                       onDone={() => setIsAvatarEditorOpen(false)}
-                      onModeChange={(mode) => {
-                        if (mode !== "image") avatarPreview.clearPreview();
-                      }}
-                      onUploadPreviewSettled={(succeeded) => {
-                        if (!succeeded) avatarPreview.clearPreview();
-                      }}
-                      onUploadPreviewStart={avatarPreview.showFilePreview}
                       onUploadingChange={setIsUploadingAvatar}
                       onUrlChange={setAvatarUrl}
                       presentation="onboarding-modal"
                       previewName={displayName.trim() || "Your profile"}
                       testIdPrefix="community-avatar"
-                      uploadPreviewUrl={avatarPreview.previewUrl}
                     />
                   </div>
                 </DialogContent>
diff --git a/desktop/src/features/profile/avatarPresentationStore.ts b/desktop/src/features/profile/avatarPresentationStore.ts
new file mode 100644
index 0000000000..6348d574c7
--- /dev/null
+++ b/desktop/src/features/profile/avatarPresentationStore.ts
@@ -0,0 +1,174 @@
+import * as React from "react";
+import { toast } from "sonner";
+
+import { rewriteRelayUrl } from "@/shared/lib/mediaUrl";
+
+export type AvatarPresentationState = "failed" | "pending" | "ready";
+
+export type AvatarPresentation = {
+  displayUrl: string;
+  state: AvatarPresentationState;
+};
+
+type AvatarPresentationEntry = {
+  generation: number;
+  localPreviewUrl: string | null;
+  remoteUrl: string;
+  snapshot: AvatarPresentation;
+};
+
+const PROBE_DELAYS_MS = [0, 750, 1_500, 3_000] as const;
+const PROBE_TIMEOUT_MS = 3_000;
+const READY_PRESENTATION_TTL_MS = 30_000;
+const presentations = new Map<string, AvatarPresentationEntry>();
+const listeners = new Set<() => void>();
+let nextGeneration = 1;
+
+function emitChange(): void {
+  for (const listener of listeners) listener();
+}
+
+function toastId(remoteUrl: string): string {
+  return `avatar-presentation:${remoteUrl}`;
+}
+
+function releaseLocalPreview(entry: AvatarPresentationEntry): void {
+  if (!entry.localPreviewUrl) return;
+  URL.revokeObjectURL(entry.localPreviewUrl);
+  entry.localPreviewUrl = null;
+}
+
+function isCurrent(entry: AvatarPresentationEntry): boolean {
+  return presentations.get(entry.remoteUrl)?.generation === entry.generation;
+}
+
+function wait(delayMs: number): Promise<void> {
+  return new Promise((resolve) => window.setTimeout(resolve, delayMs));
+}
+
+function buildProbeUrl(remoteUrl: string, attempt: number): string {
+  try {
+    const url = new URL(remoteUrl);
+    url.searchParams.set(
+      "buzz_avatar_probe",
+      `${Date.now()}-${attempt.toString()}`,
+    );
+    return url.toString();
+  } catch {
+    return remoteUrl;
+  }
+}
+
+function probeImage(
+  remoteUrl: string,
+  attempt: number,
+): Promise<string | null> {
+  return new Promise((resolve) => {
+    const image = new Image();
+    let settled = false;
+    const verifiedUrl = buildProbeUrl(remoteUrl, attempt);
+    const finish = (result: string | null) => {
+      if (settled) return;
+      settled = true;
+      window.clearTimeout(timeoutId);
+      image.onload = null;
+      image.onerror = null;
+      resolve(result);
+    };
+    const timeoutId = window.setTimeout(() => finish(null), PROBE_TIMEOUT_MS);
+
+    image.onload = () => finish(verifiedUrl);
+    image.onerror = () => finish(null);
+    image.referrerPolicy = "no-referrer";
+    image.src = rewriteRelayUrl(verifiedUrl);
+  });
+}
+
+async function verifyPresentation(
+  entry: AvatarPresentationEntry,
+): Promise<void> {
+  for (const [attempt, delayMs] of PROBE_DELAYS_MS.entries()) {
+    await wait(delayMs);
+    if (!isCurrent(entry) || entry.snapshot.state !== "pending") return;
+
+    const verifiedUrl = await probeImage(entry.remoteUrl, attempt);
+    if (!isCurrent(entry) || entry.snapshot.state !== "pending") return;
+    if (!verifiedUrl) continue;
+
+    releaseLocalPreview(entry);
+    entry.snapshot = { displayUrl: verifiedUrl, state: "ready" };
+    toast.dismiss(toastId(entry.remoteUrl));
+    emitChange();
+    window.setTimeout(() => {
+      if (!isCurrent(entry) || entry.snapshot.state !== "ready") return;
+      presentations.delete(entry.remoteUrl);
+      emitChange();
+    }, READY_PRESENTATION_TTL_MS);
+    return;
+  }
+
+  if (!isCurrent(entry) || entry.snapshot.state !== "pending") return;
+  entry.snapshot = {
+    displayUrl: entry.snapshot.displayUrl,
+    state: "failed",
+  };
+  emitChange();
+  toast.error("Avatar couldn’t finish uploading", {
+    action: {
+      label: "Retry",
+      onClick: () => retryAvatarPresentation(entry.remoteUrl),
+    },
+    description: "Your pending avatar is still local to this device.",
+    id: toastId(entry.remoteUrl),
+  });
+}
+
+export function beginAvatarPresentation(remoteUrl: string, image: Blob): void {
+  const existing = presentations.get(remoteUrl);
+  if (existing) releaseLocalPreview(existing);
+
+  const localPreviewUrl = URL.createObjectURL(image);
+  const entry: AvatarPresentationEntry = {
+    generation: nextGeneration++,
+    localPreviewUrl,
+    remoteUrl,
+    snapshot: { displayUrl: localPreviewUrl, state: "pending" },
+  };
+  presentations.set(remoteUrl, entry);
+  emitChange();
+  void verifyPresentation(entry);
+}
+
+export function retryAvatarPresentation(remoteUrl: string): void {
+  const entry = presentations.get(remoteUrl);
+  if (entry?.snapshot.state !== "failed") return;
+  entry.generation = nextGeneration++;
+  entry.snapshot = {
+    displayUrl: entry.snapshot.displayUrl,
+    state: "pending",
+  };
+  emitChange();
+  void verifyPresentation(entry);
+}
+
+export function getAvatarPresentation(
+  remoteUrl: string | null,
+): AvatarPresentation | null {
+  if (!remoteUrl) return null;
+  return presentations.get(remoteUrl)?.snapshot ?? null;
+}
+
+export function subscribeAvatarPresentations(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export function useAvatarPresentation(
+  remoteUrl: string | null,
+): AvatarPresentation | null {
+  return React.useSyncExternalStore(
+    subscribeAvatarPresentations,
+    () => getAvatarPresentation(remoteUrl),
+    () => null,
+  );
+}
diff --git a/desktop/src/features/profile/ui/ProfileAvatar.tsx b/desktop/src/features/profile/ui/ProfileAvatar.tsx
index 3a56ee329e..be0dfe21ca 100644
--- a/desktop/src/features/profile/ui/ProfileAvatar.tsx
+++ b/desktop/src/features/profile/ui/ProfileAvatar.tsx
@@ -1,11 +1,13 @@
 import * as React from "react";
-import { UserRound } from "lucide-react";
+import { CircleAlert, UserRound } from "lucide-react";
 
+import { useAvatarPresentation } from "@/features/profile/avatarPresentationStore";
 import { parseAnimatedAvatarUrl } from "@/shared/lib/animatedAvatar";
 import { cn } from "@/shared/lib/cn";
 import { getInitials } from "@/shared/lib/initials";
 import { rewriteRelayUrl } from "@/shared/lib/mediaUrl";
 import { Avatar, AvatarFallback, AvatarImage } from "@/shared/ui/avatar";
+import { Spinner } from "@/shared/ui/spinner";
 
 type ProfileAvatarProps = {
   avatarUrl: string | null;
@@ -29,16 +31,18 @@ export function ProfileAvatar({
   testId,
 }: ProfileAvatarProps) {
   const initials = getInitials(label);
+  const presentation = useAvatarPresentation(avatarUrl);
+  const presentedAvatarUrl = presentation?.displayUrl ?? avatarUrl;
 
   // Animated avatars show their static poster frame until hovered, then play
   // the animation.
-  const animated = parseAnimatedAvatarUrl(avatarUrl);
+  const animated = parseAnimatedAvatarUrl(presentedAvatarUrl);
   const [isHovered, setIsHovered] = React.useState(false);
   const baseUrl = animated
     ? isHovered
       ? animated.animationUrl
       : animated.posterUrl
-    : avatarUrl;
+    : presentedAvatarUrl;
 
   // Compute the live (proxied) source. Failures are tracked per resolved URL so
   // the poster and hover animation can recover independently.
@@ -97,6 +101,26 @@ export function ProfileAvatar({
           )}
         </AvatarFallback>
       ) : null}
+      {presentation?.state === "pending" ? (
+        <span
+          aria-label="Avatar upload pending"
+          className="absolute bottom-0 right-0 flex h-[28%] max-h-9 min-h-4 w-[28%] max-w-9 min-w-4 items-center justify-center rounded-full bg-amber-300 text-amber-950 shadow-sm ring-2 ring-background"
+          data-testid={testId ? `${testId}-upload-pending` : undefined}
+          role="status"
+        >
+          <Spinner aria-hidden="true" className="h-[60%] w-[60%] border-2" />
+        </span>
+      ) : null}
+      {presentation?.state === "failed" ? (
+        <span
+          aria-label="Avatar upload failed"
+          className="absolute bottom-0 right-0 flex h-[28%] max-h-9 min-h-4 w-[28%] max-w-9 min-w-4 items-center justify-center rounded-full bg-destructive text-destructive-foreground shadow-sm ring-2 ring-background"
+          data-testid={testId ? `${testId}-upload-failed` : undefined}
+          role="status"
+        >
+          <CircleAlert aria-hidden="true" className="h-[70%] w-[70%]" />
+        </span>
+      ) : null}
     </Avatar>
   );
 }
diff --git a/desktop/src/features/profile/ui/ProfileAvatarEditor.helpers.ts b/desktop/src/features/profile/ui/ProfileAvatarEditor.helpers.ts
index f30788fe9a..a0f61cd1d7 100644
--- a/desktop/src/features/profile/ui/ProfileAvatarEditor.helpers.ts
+++ b/desktop/src/features/profile/ui/ProfileAvatarEditor.helpers.ts
@@ -1,5 +1,7 @@
 import * as React from "react";
 
+import { beginAvatarPresentation } from "@/features/profile/avatarPresentationStore";
+
 export const DONE_BUTTON_CONTENT_TRANSITION = {
   duration: 0.14,
   ease: [0.23, 1, 0.32, 1],
@@ -28,28 +30,27 @@ export function waitForPendingButtonPaint() {
 
 export function useUploadPreviewLifecycle({
   clearFallback,
-  onSettled,
-  onStart,
   onSuccess,
   showFallback,
 }: {
   clearFallback: () => void;
-  onSettled?: (succeeded: boolean) => void;
-  onStart?: (file: File) => void;
   onSuccess: (uploadedUrl: string) => void;
   showFallback: (file: File) => void;
 }) {
-  const succeededRef = React.useRef(false);
+  const pendingFileRef = React.useRef<File | null>(null);
 
   return {
-    onUploadSettled: () =>
-      onSettled ? onSettled(succeededRef.current) : clearFallback(),
+    onUploadSettled: () => {
+      pendingFileRef.current = null;
+      clearFallback();
+    },
     onUploadStart: (file: File) => {
-      succeededRef.current = false;
-      (onStart ?? showFallback)(file);
+      pendingFileRef.current = file;
+      showFallback(file);
     },
     onUploadSuccess: (uploadedUrl: string) => {
-      succeededRef.current = true;
+      const pendingFile = pendingFileRef.current;
+      if (pendingFile) beginAvatarPresentation(uploadedUrl, pendingFile);
       onSuccess(uploadedUrl);
     },
   };
diff --git a/desktop/src/features/profile/ui/ProfileAvatarEditor.tsx b/desktop/src/features/profile/ui/ProfileAvatarEditor.tsx
index ce7d0c8207..9e7901fffc 100644
--- a/desktop/src/features/profile/ui/ProfileAvatarEditor.tsx
+++ b/desktop/src/features/profile/ui/ProfileAvatarEditor.tsx
@@ -76,9 +76,6 @@ export function ProfileAvatarEditor({
   onAnimatedAvatarApply,
   onDone,
   onUploadingChange,
-  onUploadPreviewStart,
-  onUploadPreviewSettled,
-  uploadPreviewUrl,
   previewName,
   showEmojiColorControlsWhenEmpty = false,
   disabled,
@@ -99,7 +96,6 @@ export function ProfileAvatarEditor({
   const [isDragging, setIsDragging] = React.useState(false);
   const [urlDraft, setUrlDraft] = React.useState("");
   const localPreview = useLocalAvatarPreview();
-  const activeUploadPreviewUrl = uploadPreviewUrl ?? localPreview.previewUrl;
   const [selectedEmoji, setSelectedEmoji] = React.useState<string | null>(
     () => initialEmojiAvatar?.emoji ?? null,
   );
@@ -178,8 +174,6 @@ export function ProfileAvatarEditor({
     React.useState(false);
   const uploadPreviewLifecycle = useUploadPreviewLifecycle({
     clearFallback: localPreview.clearPreview,
-    onSettled: onUploadPreviewSettled,
-    onStart: onUploadPreviewStart,
     onSuccess: handleUploadSuccess,
     showFallback: localPreview.showFilePreview,
   });
@@ -617,9 +611,9 @@ export function ProfileAvatarEditor({
                     type="button"
                   >
                     {isOnboardingModal &&
-                    (activeUploadPreviewUrl || avatarUrl) ? (
+                    (localPreview.previewUrl || avatarUrl) ? (
                       <ProfileAvatarUploadPreview
-                        avatarUrl={activeUploadPreviewUrl || avatarUrl || ""}
+                        avatarUrl={localPreview.previewUrl || avatarUrl || ""}
                         label={previewName}
                         testId={`${testIdPrefix}-upload-preview`}
                       />
diff --git a/desktop/src/features/profile/ui/ProfileAvatarEditor.types.ts b/desktop/src/features/profile/ui/ProfileAvatarEditor.types.ts
index f113838b69..96957a1668 100644
--- a/desktop/src/features/profile/ui/ProfileAvatarEditor.types.ts
+++ b/desktop/src/features/profile/ui/ProfileAvatarEditor.types.ts
@@ -14,9 +14,6 @@ export type ProfileAvatarEditorProps = {
   onModeChange?: (mode: AvatarMode) => void;
   onUploadedAvatarChange?: (url: string | null) => void;
   onUploadingChange?: (isUploading: boolean) => void;
-  uploadPreviewUrl?: string | null;
-  onUploadPreviewStart?: (file: File) => void;
-  onUploadPreviewSettled?: (succeeded: boolean) => void;
   onAnimatedAvatarApply?: (url: string) => void;
   onDone?: () => void;
   donePending?: boolean;
diff --git a/desktop/tests/e2e/onboarding.spec.ts b/desktop/tests/e2e/onboarding.spec.ts
index a3ac2b4faf..9a3889faa3 100644
--- a/desktop/tests/e2e/onboarding.spec.ts
+++ b/desktop/tests/e2e/onboarding.spec.ts
@@ -1314,7 +1314,13 @@ test("connected first-community profile step offers equal-width Next and Back co
   );
   await installFakeCamera(page, { failRequests: 1 });
   const uploadedAvatarUrl = "https://mock.relay/media/community-avatar.png";
-  await page.route(uploadedAvatarUrl, async (route) => {
+  let avatarRequestCount = 0;
+  await page.route(`${uploadedAvatarUrl}*`, async (route) => {
+    avatarRequestCount += 1;
+    if (avatarRequestCount === 1) {
+      await route.fulfill({ status: 404 });
+      return;
+    }
     await new Promise((resolve) => setTimeout(resolve, 1_000));
     await route.fulfill({
       body: Buffer.from(
@@ -1477,18 +1483,25 @@ test("connected first-community profile step offers equal-width Next and Back co
   await expect(previewImage).toHaveAttribute("src", localPreviewUrl ?? "");
   await saveButton.click();
   await expect(avatarDialog).toHaveCount(0);
+  const avatarCircleImage = page.getByTestId("community-avatar-circle-image");
+  await expect(avatarCircleImage).toHaveAttribute("src", /^blob:/);
   await expect(
-    page.getByTestId("community-avatar-circle-image"),
-  ).toHaveAttribute("src", localPreviewUrl ?? "");
+    page.getByTestId("community-avatar-circle-upload-pending"),
+  ).toBeVisible();
+  await expect(page.getByTestId("community-profile-name-key")).toBeEnabled();
   await expect
-    .poll(() =>
-      page.getByTestId("community-avatar-circle-image").getAttribute("src"),
-    )
-    .not.toBe(localPreviewUrl);
+    .poll(() => avatarCircleImage.getAttribute("src"))
+    .not.toMatch(/^blob:/);
+  await expect(
+    page.getByTestId("community-avatar-circle-upload-pending"),
+  ).toHaveCount(0);
 
   await avatarButton.click();
   await expect(avatarDialog).toBeVisible();
-  await expect(previewImage).toHaveAttribute("src", uploadedAvatarUrl);
+  await expect(previewImage).toHaveAttribute(
+    "src",
+    new RegExp(`^${uploadedAvatarUrl}`),
+  );
   const modeContentShell = page.getByTestId(
     "community-avatar-mode-content-shell",
   );
@@ -1623,6 +1636,117 @@ test("connected first-community profile step offers equal-width Next and Back co
     .toBeNull();
 });
 
+test("pending avatar stays navigable and exposes retry after propagation fails", async ({
+  page,
+}) => {
+  await seedActiveIdentity(page, BLANK_TYLER_IDENTITY);
+  await page.addInitScript(
+    ({ pubkey, transactionStorageKey }) => {
+      window.localStorage.setItem(
+        `buzz-machine-onboarding-complete.v2:${pubkey}`,
+        "true",
+      );
+      const timestamp = new Date().toISOString();
+      window.localStorage.setItem(
+        transactionStorageKey,
+        JSON.stringify({
+          id: "txn-avatar-propagation",
+          source: "first-community",
+          stage: "profile",
+          relayUrl: "wss://default.example.com",
+          communityName: "Default",
+          communityId: "e2e-default-community",
+          addedCommunity: true,
+          createdAt: timestamp,
+          updatedAt: timestamp,
+        }),
+      );
+    },
+    {
+      pubkey: BLANK_TYLER_IDENTITY.pubkey,
+      transactionStorageKey: COMMUNITY_ONBOARDING_TRANSACTION_STORAGE_KEY,
+    },
+  );
+
+  const uploadedAvatarUrl =
+    "https://mock.relay/media/pending-community-avatar.png";
+  let avatarReady = false;
+  await page.route(`${uploadedAvatarUrl}*`, async (route) => {
+    if (!avatarReady) {
+      await route.fulfill({ status: 404 });
+      return;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    await route.fulfill({
+      body: Buffer.from(
+        "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=",
+        "base64",
+      ),
+      contentType: "image/png",
+    });
+  });
+  await installMockBridge(
+    page,
+    {
+      uploadDelayMs: 250,
+      uploadDescriptors: [
+        {
+          filename: "pending-community-avatar.png",
+          sha256: "d".repeat(64),
+          size: 128,
+          type: "image/png",
+          uploaded: 1_779_900_000,
+          url: uploadedAvatarUrl,
+        },
+      ],
+    },
+    {
+      relayWsUrl: "wss://default.example.com",
+      skipOnboardingSeed: true,
+    },
+  );
+  await page.goto("/");
+
+  await page.getByTestId("community-profile-name-key").fill("Tyler");
+  await page.getByTestId("community-avatar-open").click();
+  await page.getByTestId("community-avatar-input").setInputFiles({
+    buffer: Buffer.from(
+      "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=",
+      "base64",
+    ),
+    mimeType: "image/png",
+    name: "pending-community-avatar.png",
+  });
+  await page.getByTestId("community-avatar-done").click();
+
+  const avatarImage = page.getByTestId("community-avatar-circle-image");
+  await expect(avatarImage).toHaveAttribute("src", /^blob:/);
+  await expect(
+    page.getByTestId("community-avatar-circle-upload-pending"),
+  ).toBeVisible();
+  await expect(page.getByTestId("community-profile-next")).toBeEnabled();
+
+  await expect(
+    page.getByTestId("community-avatar-circle-upload-failed"),
+  ).toBeVisible({ timeout: 10_000 });
+  await expect(avatarImage).toHaveAttribute("src", /^blob:/);
+  await expect(
+    page.getByText("Avatar couldn’t finish uploading"),
+  ).toBeVisible();
+
+  avatarReady = true;
+  await page.getByRole("button", { name: "Retry" }).click();
+  await expect(
+    page.getByTestId("community-avatar-circle-upload-pending"),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("community-avatar-circle-upload-failed"),
+  ).toHaveCount(0);
+  await expect
+    .poll(() => avatarImage.getAttribute("src"))
+    .not.toMatch(/^blob:/);
+});
+
 test("membership denial on community profile save offers recovery", async ({
   page,
 }) => {

From 1eccae1748596b4eae2ec1f7a318f27c27f7d5a2 Mon Sep 17 00:00:00 2001
From: Logan Johnson <loganj@squareup.com>
Date: Tue, 21 Jul 2026 12:07:03 -0700
Subject: [PATCH 5/6] Refine pending avatar states

---
 .../profile/avatarPresentationStore.ts        |  6 +--
 .../src/features/profile/ui/ProfileAvatar.tsx | 24 +++++------
 desktop/tests/e2e/onboarding.spec.ts          | 42 ++++++++++++++++---
 3 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/desktop/src/features/profile/avatarPresentationStore.ts b/desktop/src/features/profile/avatarPresentationStore.ts
index 6348d574c7..769e7b27b7 100644
--- a/desktop/src/features/profile/avatarPresentationStore.ts
+++ b/desktop/src/features/profile/avatarPresentationStore.ts
@@ -109,7 +109,7 @@ async function verifyPresentation(
 
   if (!isCurrent(entry) || entry.snapshot.state !== "pending") return;
   entry.snapshot = {
-    displayUrl: entry.snapshot.displayUrl,
+    displayUrl: entry.remoteUrl,
     state: "failed",
   };
   emitChange();
@@ -118,7 +118,7 @@ async function verifyPresentation(
       label: "Retry",
       onClick: () => retryAvatarPresentation(entry.remoteUrl),
     },
-    description: "Your pending avatar is still local to this device.",
+    description: "Your default avatar is showing instead.",
     id: toastId(entry.remoteUrl),
   });
 }
@@ -144,7 +144,7 @@ export function retryAvatarPresentation(remoteUrl: string): void {
   if (entry?.snapshot.state !== "failed") return;
   entry.generation = nextGeneration++;
   entry.snapshot = {
-    displayUrl: entry.snapshot.displayUrl,
+    displayUrl: entry.localPreviewUrl ?? entry.remoteUrl,
     state: "pending",
   };
   emitChange();
diff --git a/desktop/src/features/profile/ui/ProfileAvatar.tsx b/desktop/src/features/profile/ui/ProfileAvatar.tsx
index be0dfe21ca..3153fb4be1 100644
--- a/desktop/src/features/profile/ui/ProfileAvatar.tsx
+++ b/desktop/src/features/profile/ui/ProfileAvatar.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { CircleAlert, UserRound } from "lucide-react";
+import { UserRound } from "lucide-react";
 
 import { useAvatarPresentation } from "@/features/profile/avatarPresentationStore";
 import { parseAnimatedAvatarUrl } from "@/shared/lib/animatedAvatar";
@@ -73,7 +73,11 @@ export function ProfileAvatar({
       {src !== undefined ? (
         <AvatarImage
           alt={`${label} avatar`}
-          className={cn("object-cover", imageClassName)}
+          className={cn(
+            "object-cover",
+            presentation?.state === "pending" && "brightness-75",
+            imageClassName,
+          )}
           data-testid={testId ? `${testId}-image` : undefined}
           onLoadingStatusChange={(status) => {
             if (status === "error") setFailedSrc(liveSrc);
@@ -104,21 +108,13 @@ export function ProfileAvatar({
       {presentation?.state === "pending" ? (
         <span
           aria-label="Avatar upload pending"
-          className="absolute bottom-0 right-0 flex h-[28%] max-h-9 min-h-4 w-[28%] max-w-9 min-w-4 items-center justify-center rounded-full bg-amber-300 text-amber-950 shadow-sm ring-2 ring-background"
+          className="pointer-events-none absolute inset-0 flex items-center justify-center text-white drop-shadow-sm"
           data-testid={testId ? `${testId}-upload-pending` : undefined}
           role="status"
         >
-          <Spinner aria-hidden="true" className="h-[60%] w-[60%] border-2" />
-        </span>
-      ) : null}
-      {presentation?.state === "failed" ? (
-        <span
-          aria-label="Avatar upload failed"
-          className="absolute bottom-0 right-0 flex h-[28%] max-h-9 min-h-4 w-[28%] max-w-9 min-w-4 items-center justify-center rounded-full bg-destructive text-destructive-foreground shadow-sm ring-2 ring-background"
-          data-testid={testId ? `${testId}-upload-failed` : undefined}
-          role="status"
-        >
-          <CircleAlert aria-hidden="true" className="h-[70%] w-[70%]" />
+          <span className="flex size-7 items-center justify-center rounded-full bg-black/35">
+            <Spinner aria-hidden="true" className="border-2" size={16} />
+          </span>
         </span>
       ) : null}
     </Avatar>
diff --git a/desktop/tests/e2e/onboarding.spec.ts b/desktop/tests/e2e/onboarding.spec.ts
index 9a3889faa3..2bafa5e6e6 100644
--- a/desktop/tests/e2e/onboarding.spec.ts
+++ b/desktop/tests/e2e/onboarding.spec.ts
@@ -1724,24 +1724,56 @@ test("pending avatar stays navigable and exposes retry after propagation fails",
   await expect(
     page.getByTestId("community-avatar-circle-upload-pending"),
   ).toBeVisible();
+  await expect(avatarImage).toHaveClass(/brightness-75/);
   await expect(page.getByTestId("community-profile-next")).toBeEnabled();
+  await page.waitForTimeout(500);
+  await expect(
+    page.getByTestId("community-avatar-circle-upload-pending"),
+  ).toBeVisible();
+
+  const avatar = page.getByTestId("community-avatar-circle");
+  const pendingSpinner = page
+    .getByTestId("community-avatar-circle-upload-pending")
+    .locator(".sprout-arc-spinner");
+  const [avatarBox, spinnerBox] = await Promise.all([
+    avatar.boundingBox(),
+    pendingSpinner.boundingBox(),
+  ]);
+  if (!avatarBox || !spinnerBox) {
+    throw new Error("Could not measure pending avatar spinner");
+  }
+  expect(
+    Math.abs(
+      avatarBox.x + avatarBox.width / 2 - (spinnerBox.x + spinnerBox.width / 2),
+    ),
+  ).toBeLessThanOrEqual(1);
+  expect(
+    Math.abs(
+      avatarBox.y +
+        avatarBox.height / 2 -
+        (spinnerBox.y + spinnerBox.height / 2),
+    ),
+  ).toBeLessThanOrEqual(1);
+  expect(spinnerBox.width / avatarBox.width).toBeLessThanOrEqual(0.2);
 
   await expect(
-    page.getByTestId("community-avatar-circle-upload-failed"),
+    page.getByTestId("community-avatar-circle-fallback"),
   ).toBeVisible({ timeout: 10_000 });
-  await expect(avatarImage).toHaveAttribute("src", /^blob:/);
+  await expect(avatarImage).toHaveCount(0);
   await expect(
     page.getByText("Avatar couldn’t finish uploading"),
   ).toBeVisible();
+  await expect(
+    page.getByText("Your default avatar is showing instead."),
+  ).toBeVisible();
 
   avatarReady = true;
   await page.getByRole("button", { name: "Retry" }).click();
   await expect(
     page.getByTestId("community-avatar-circle-upload-pending"),
   ).toBeVisible();
-  await expect(
-    page.getByTestId("community-avatar-circle-upload-failed"),
-  ).toHaveCount(0);
+  await expect(avatarImage).toHaveAttribute("src", /^blob:/);
+  await expect(avatarImage).toHaveClass(/brightness-75/);
   await expect
     .poll(() => avatarImage.getAttribute("src"))
     .not.toMatch(/^blob:/);

From 43e528bfe0c6c11a04b38fdad1fad43e602b6918 Mon Sep 17 00:00:00 2001
From: npub19x6jnl6rhepymwyl2xlltz3ce7rfg2ktllle3g2vu59n3s490k8s9n40l3
 <29b529ff43be424db89f51bff58a38cf86942acbffff98a14ce50b38c2a57d8f@sprout-oss.stage.blox.sqprod.co>
Date: Tue, 21 Jul 2026 12:21:05 -0700
Subject: [PATCH 6/6] Restore empty avatar after upload failure

Co-authored-by: npub19x6jnl6rhepymwyl2xlltz3ce7rfg2ktllle3g2vu59n3s490k8s9n40l3 <29b529ff43be424db89f51bff58a38cf86942acbffff98a14ce50b38c2a57d8f@sprout-oss.stage.blox.sqprod.co>
Signed-off-by: npub19x6jnl6rhepymwyl2xlltz3ce7rfg2ktllle3g2vu59n3s490k8s9n40l3 <29b529ff43be424db89f51bff58a38cf86942acbffff98a14ce50b38c2a57d8f@sprout-oss.stage.blox.sqprod.co>
---
 .../features/onboarding/ui/CommunityOnboardingFlow.tsx | 10 ++++++++--
 desktop/tests/e2e/onboarding.spec.ts                   |  8 +++++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx b/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx
index 331d84d7c1..050aad96d0 100644
--- a/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx
+++ b/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx
@@ -13,6 +13,7 @@ import {
   takePendingWelcomeChannelForDirectEntry,
   WELCOME_SURFACE_READY_EVENT,
 } from "@/features/onboarding/welcome";
+import { useAvatarPresentation } from "@/features/profile/avatarPresentationStore";
 import { profileQueryKey } from "@/features/profile/hooks";
 import { ProfileAvatar } from "@/features/profile/ui/ProfileAvatar";
 import {
@@ -80,7 +81,9 @@ function AvatarCircle({
   triggerRef?: React.Ref<HTMLButtonElement>;
 }) {
   const emojiAvatar = parseEmojiAvatarDataUrl(avatarUrl);
-  const hasAvatar = avatarUrl.trim().length > 0;
+  const presentation = useAvatarPresentation(avatarUrl);
+  const hasAvatar =
+    avatarUrl.trim().length > 0 && presentation?.state !== "failed";
 
   return (
     <button
@@ -106,7 +109,10 @@ function AvatarCircle({
           testId="community-avatar-circle"
         />
       ) : (
-        <span className="flex h-36 w-36 items-center justify-center rounded-full bg-white/30 text-[var(--buzz-onboarding-backup-ink)] transition-colors group-hover:bg-white/40">
+        <span
+          className="flex h-36 w-36 items-center justify-center rounded-full bg-white/30 text-[var(--buzz-onboarding-backup-ink)] transition-colors group-hover:bg-white/40"
+          data-testid="community-avatar-empty"
+        >
           <Plus className="h-7 w-7" aria-hidden="true" />
         </span>
       )}
diff --git a/desktop/tests/e2e/onboarding.spec.ts b/desktop/tests/e2e/onboarding.spec.ts
index 2bafa5e6e6..c3c716bec3 100644
--- a/desktop/tests/e2e/onboarding.spec.ts
+++ b/desktop/tests/e2e/onboarding.spec.ts
@@ -1756,9 +1756,15 @@ test("pending avatar stays navigable and exposes retry after propagation fails",
   ).toBeLessThanOrEqual(1);
   expect(spinnerBox.width / avatarBox.width).toBeLessThanOrEqual(0.2);
 
+  await expect(page.getByTestId("community-avatar-empty")).toBeVisible({
+    timeout: 10_000,
+  });
+  await expect(
+    page.getByRole("button", { name: "Add an avatar" }),
+  ).toBeVisible();
   await expect(
     page.getByTestId("community-avatar-circle-fallback"),
-  ).toBeVisible({ timeout: 10_000 });
+  ).toHaveCount(0);
   await expect(avatarImage).toHaveCount(0);
   await expect(
     page.getByText("Avatar couldn’t finish uploading"),