From 458a90fc2df7fcece0eb127126aca52f5543c18f Mon Sep 17 00:00:00 2001
From: Prem Sathisha Etagi <premsathisha@users.noreply.github.com>
Date: Thu, 16 Apr 2026 12:04:15 -0700
Subject: [PATCH 1/3] Fix navbar avatar fallback

---
 .../layouts/dashboard-mobile-nav.tsx          | 22 ++++-------
 .../components/layouts/dashboard-topbar.tsx   | 38 +++++--------------
 2 files changed, 17 insertions(+), 43 deletions(-)

diff --git a/apps/dashboard/src/components/layouts/dashboard-mobile-nav.tsx b/apps/dashboard/src/components/layouts/dashboard-mobile-nav.tsx
index 58114c3..aaaeeae 100644
--- a/apps/dashboard/src/components/layouts/dashboard-mobile-nav.tsx
+++ b/apps/dashboard/src/components/layouts/dashboard-mobile-nav.tsx
@@ -9,7 +9,11 @@ import {
 	SystemIcon,
 	UserCircleIcon,
 } from "@diffkit/icons";
-import { Avatar, AvatarFallback } from "@diffkit/ui/components/avatar";
+import {
+	Avatar,
+	AvatarFallback,
+	AvatarImage,
+} from "@diffkit/ui/components/avatar";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -24,7 +28,6 @@ import { cn } from "@diffkit/ui/lib/utils";
 import { useQuery } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
 import { useTheme } from "next-themes";
-import { useState } from "react";
 import { signOutToLogin } from "#/lib/auth-actions";
 import { githubViewerQueryOptions } from "#/lib/github.query";
 import { useHasMounted } from "#/lib/use-has-mounted";
@@ -63,7 +66,6 @@ export function DashboardMobileNav({
 	counts,
 }: DashboardMobileNavProps) {
 	const { theme, setTheme } = useTheme();
-	const [avatarLoadFailed, setAvatarLoadFailed] = useState(false);
 	const hasMounted = useHasMounted();
 	const viewerQuery = useQuery({
 		...githubViewerQueryOptions({ userId: user.id }),
@@ -130,18 +132,8 @@ export function DashboardMobileNav({
 						className="flex flex-1 items-center justify-center py-3 text-muted-foreground"
 					>
 						<Avatar className="size-6 border border-border">
-							{user.image && !avatarLoadFailed ? (
-								<img
-									src={user.image}
-									alt={displayName}
-									className="size-full object-cover"
-									onError={() => setAvatarLoadFailed(true)}
-								/>
-							) : (
-								<AvatarFallback className="text-[8px]">
-									{initials}
-								</AvatarFallback>
-							)}
+							<AvatarImage src={user.image ?? undefined} alt={displayName} />
+							<AvatarFallback className="text-[8px]">{initials}</AvatarFallback>
 						</Avatar>
 					</button>
 				</DropdownMenuTrigger>
diff --git a/apps/dashboard/src/components/layouts/dashboard-topbar.tsx b/apps/dashboard/src/components/layouts/dashboard-topbar.tsx
index 73a3747..3d2ba19 100644
--- a/apps/dashboard/src/components/layouts/dashboard-topbar.tsx
+++ b/apps/dashboard/src/components/layouts/dashboard-topbar.tsx
@@ -12,7 +12,11 @@ import {
 	UserCircleIcon,
 	XLogo,
 } from "@diffkit/icons";
-import { Avatar, AvatarFallback } from "@diffkit/ui/components/avatar";
+import {
+	Avatar,
+	AvatarFallback,
+	AvatarImage,
+} from "@diffkit/ui/components/avatar";
 import { Button } from "@diffkit/ui/components/button";
 import {
 	DropdownMenu,
@@ -26,7 +30,7 @@ import {
 } from "@diffkit/ui/components/dropdown-menu";
 import { useQuery } from "@tanstack/react-query";
 import { Link, useRouter } from "@tanstack/react-router";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { DashboardTabs } from "#/components/layouts/dashboard-tabs";
 import { signOutToLogin } from "#/lib/auth-actions";
 import {
@@ -74,7 +78,6 @@ export function DashboardTopbar({
 	tabsReady,
 	counts,
 }: DashboardTopbarProps) {
-	const [avatarLoadFailed, setAvatarLoadFailed] = useState(false);
 	const openTabs = useTabs();
 	const hasMounted = useHasMounted();
 	const viewerQuery = useQuery({
@@ -232,37 +235,16 @@ export function DashboardTopbar({
 							className="flex size-8 items-center justify-center rounded-full"
 						>
 							<Avatar className="size-7 border border-border">
-								{user.image && !avatarLoadFailed ? (
-									<img
-										src={user.image}
-										alt={displayName}
-										className="size-full object-cover"
-										onError={() => {
-											setAvatarLoadFailed(true);
-										}}
-									/>
-								) : (
-									<AvatarFallback className="text-xs">
-										{initials}
-									</AvatarFallback>
-								)}
+								<AvatarImage src={user.image ?? undefined} alt={displayName} />
+								<AvatarFallback className="text-xs">{initials}</AvatarFallback>
 							</Avatar>
 						</button>
 					</DropdownMenuTrigger>
 					<DropdownMenuContent align="start" className="w-56">
 						<DropdownMenuLabel className="flex items-center gap-3 py-2">
 							<Avatar className="size-8 border border-border">
-								{user.image && !avatarLoadFailed ? (
-									<img
-										src={user.image}
-										alt={displayName}
-										className="size-full object-cover"
-									/>
-								) : (
-									<AvatarFallback className="text-xs">
-										{initials}
-									</AvatarFallback>
-								)}
+								<AvatarImage src={user.image ?? undefined} alt={displayName} />
+								<AvatarFallback className="text-xs">{initials}</AvatarFallback>
 							</Avatar>
 							<div className="flex flex-col">
 								<span className="text-sm font-medium text-foreground">

From ebff78aba693635248887bf8ff7a0cb45cc9e412 Mon Sep 17 00:00:00 2001
From: Prem Sathisha Etagi <premsathisha@users.noreply.github.com>
Date: Thu, 16 Apr 2026 15:22:47 -0700
Subject: [PATCH 2/3] Delay avatar fallback to prevent initials flash on
 refresh

---
 .../src/components/layouts/dashboard-mobile-nav.tsx       | 4 +++-
 .../dashboard/src/components/layouts/dashboard-topbar.tsx | 8 ++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/dashboard/src/components/layouts/dashboard-mobile-nav.tsx b/apps/dashboard/src/components/layouts/dashboard-mobile-nav.tsx
index aaaeeae..a3ec9f3 100644
--- a/apps/dashboard/src/components/layouts/dashboard-mobile-nav.tsx
+++ b/apps/dashboard/src/components/layouts/dashboard-mobile-nav.tsx
@@ -133,7 +133,9 @@ export function DashboardMobileNav({
 					>
 						<Avatar className="size-6 border border-border">
 							<AvatarImage src={user.image ?? undefined} alt={displayName} />
-							<AvatarFallback className="text-[8px]">{initials}</AvatarFallback>
+							<AvatarFallback delayMs={400} className="text-[8px]">
+								{initials}
+							</AvatarFallback>
 						</Avatar>
 					</button>
 				</DropdownMenuTrigger>
diff --git a/apps/dashboard/src/components/layouts/dashboard-topbar.tsx b/apps/dashboard/src/components/layouts/dashboard-topbar.tsx
index 3d2ba19..e32dfea 100644
--- a/apps/dashboard/src/components/layouts/dashboard-topbar.tsx
+++ b/apps/dashboard/src/components/layouts/dashboard-topbar.tsx
@@ -236,7 +236,9 @@ export function DashboardTopbar({
 						>
 							<Avatar className="size-7 border border-border">
 								<AvatarImage src={user.image ?? undefined} alt={displayName} />
-								<AvatarFallback className="text-xs">{initials}</AvatarFallback>
+								<AvatarFallback delayMs={400} className="text-xs">
+									{initials}
+								</AvatarFallback>
 							</Avatar>
 						</button>
 					</DropdownMenuTrigger>
@@ -244,7 +246,9 @@ export function DashboardTopbar({
 						<DropdownMenuLabel className="flex items-center gap-3 py-2">
 							<Avatar className="size-8 border border-border">
 								<AvatarImage src={user.image ?? undefined} alt={displayName} />
-								<AvatarFallback className="text-xs">{initials}</AvatarFallback>
+								<AvatarFallback delayMs={400} className="text-xs">
+									{initials}
+								</AvatarFallback>
 							</Avatar>
 							<div className="flex flex-col">
 								<span className="text-sm font-medium text-foreground">

From 4d4dfa11087872f9ac216c895eff1adbff1570de Mon Sep 17 00:00:00 2001
From: Prem Sathisha Etagi <premsathisha@users.noreply.github.com>
Date: Thu, 16 Apr 2026 16:15:36 -0700
Subject: [PATCH 3/3] Render avatar fallback immediately when image is missing

---
 .../src/components/layouts/dashboard-mobile-nav.tsx    |  5 ++++-
 .../src/components/layouts/dashboard-topbar.tsx        | 10 ++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/dashboard/src/components/layouts/dashboard-mobile-nav.tsx b/apps/dashboard/src/components/layouts/dashboard-mobile-nav.tsx
index a3ec9f3..9b6405d 100644
--- a/apps/dashboard/src/components/layouts/dashboard-mobile-nav.tsx
+++ b/apps/dashboard/src/components/layouts/dashboard-mobile-nav.tsx
@@ -133,7 +133,10 @@ export function DashboardMobileNav({
 					>
 						<Avatar className="size-6 border border-border">
 							<AvatarImage src={user.image ?? undefined} alt={displayName} />
-							<AvatarFallback delayMs={400} className="text-[8px]">
+							<AvatarFallback
+								delayMs={user.image ? 400 : 0}
+								className="text-[8px]"
+							>
 								{initials}
 							</AvatarFallback>
 						</Avatar>
diff --git a/apps/dashboard/src/components/layouts/dashboard-topbar.tsx b/apps/dashboard/src/components/layouts/dashboard-topbar.tsx
index e32dfea..2b1db7d 100644
--- a/apps/dashboard/src/components/layouts/dashboard-topbar.tsx
+++ b/apps/dashboard/src/components/layouts/dashboard-topbar.tsx
@@ -236,7 +236,10 @@ export function DashboardTopbar({
 						>
 							<Avatar className="size-7 border border-border">
 								<AvatarImage src={user.image ?? undefined} alt={displayName} />
-								<AvatarFallback delayMs={400} className="text-xs">
+								<AvatarFallback
+									delayMs={user.image ? 400 : 0}
+									className="text-xs"
+								>
 									{initials}
 								</AvatarFallback>
 							</Avatar>
@@ -246,7 +249,10 @@ export function DashboardTopbar({
 						<DropdownMenuLabel className="flex items-center gap-3 py-2">
 							<Avatar className="size-8 border border-border">
 								<AvatarImage src={user.image ?? undefined} alt={displayName} />
-								<AvatarFallback delayMs={400} className="text-xs">
+								<AvatarFallback
+									delayMs={user.image ? 400 : 0}
+									className="text-xs"
+								>
 									{initials}
 								</AvatarFallback>
 							</Avatar>