fix(ui): stop avatar from requesting the current page (#13177)

ui/changelog.d/avatar-self-request.fixed.md

@@ -0,0 +1 @@
+User avatar requesting the current page as an image on every load, which rendered each page twice

ui/components/layout/user-nav/user-nav.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { TooltipProvider } from "@/components/shadcn/tooltip";
+
+import { UserNav } from "./user-nav";
+
+vi.mock("next-auth/react", () => ({
+  useSession: () => ({ data: { user: { name: "Jane Doe" } } }),
+}));
+
+vi.mock("@/actions/auth", () => ({ logOut: vi.fn() }));
+
+describe("UserNav", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("renders the initials without requesting an avatar image", () => {
+    // Given
+    const imageSpy = vi.spyOn(window, "Image");
+
+    // When
+    render(
+      <TooltipProvider>
+        <UserNav />
+      </TooltipProvider>,
+    );
+
+    // Then
+    expect(screen.getByText("JD")).toBeInTheDocument();
+    expect(imageSpy).not.toHaveBeenCalled();
+  });
+});

ui/components/layout/user-nav/user-nav.tsx

@@ -4,11 +4,7 @@ import { LogOut } from "lucide-react";
 import { useSession } from "next-auth/react";
 
 import { logOut } from "@/actions/auth";
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/components/shadcn/avatar/avatar";
+import { Avatar, AvatarFallback } from "@/components/shadcn/avatar/avatar";
 import { Button } from "@/components/shadcn/button/button";
 import { CustomLink } from "@/components/shadcn/custom/custom-link";
 import {
@@ -43,7 +39,6 @@ export const UserNav = () => {
           >
             <CustomLink href="/profile" target="_self" aria-label="Account">
               <Avatar className="h-8 w-8">
-                <AvatarImage src="#" alt="Avatar" />
                 <AvatarFallback className="bg-transparent text-xs font-bold">
                   {initials}
                 </AvatarFallback>