From 54f982589a2cb9a582cd6f2d5565dedca6f2ad17 Mon Sep 17 00:00:00 2001
From: tofarr <tofarr@gmail.com>
Date: Thu, 6 Mar 2025 08:59:28 -0700
Subject: [PATCH] Fix annoying Avatar flicker when loading (#7129)

---
 .../src/components/features/sidebar/sidebar.tsx | 17 +++++++----------
 .../features/sidebar/user-actions.tsx           |  9 +++++++--
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/features/sidebar/sidebar.tsx b/frontend/src/components/features/sidebar/sidebar.tsx
index d0f2ba427c..3a63f2338e 100644
--- a/frontend/src/components/features/sidebar/sidebar.tsx
+++ b/frontend/src/components/features/sidebar/sidebar.tsx
@@ -10,7 +10,6 @@ import { AllHandsLogoButton } from "#/components/shared/buttons/all-hands-logo-b
 import { DocsButton } from "#/components/shared/buttons/docs-button";
 import { ExitProjectButton } from "#/components/shared/buttons/exit-project-button";
 import { SettingsButton } from "#/components/shared/buttons/settings-button";
-import { LoadingSpinner } from "#/components/shared/loading-spinner";
 import { SettingsModal } from "#/components/shared/modals/settings/settings-modal";
 import { useCurrentSettings } from "#/context/settings-context";
 import { useSettings } from "#/hooks/query/use-settings";
@@ -111,15 +110,13 @@ export function Sidebar() {
             >
               <SettingsButton />
             </NavLink>
-            {!user.isLoading && (
-              <UserActions
-                user={
-                  user.data ? { avatar_url: user.data.avatar_url } : undefined
-                }
-                onLogout={handleLogout}
-              />
-            )}
-            {user.isLoading && <LoadingSpinner size="small" />}
+            <UserActions
+              user={
+                user.data ? { avatar_url: user.data.avatar_url } : undefined
+              }
+              onLogout={handleLogout}
+              isLoading={user.isLoading || user.isPending}
+            />
           </div>
         </nav>
 
diff --git a/frontend/src/components/features/sidebar/user-actions.tsx b/frontend/src/components/features/sidebar/user-actions.tsx
index 0ac8dc95f5..b34544d36a 100644
--- a/frontend/src/components/features/sidebar/user-actions.tsx
+++ b/frontend/src/components/features/sidebar/user-actions.tsx
@@ -5,9 +5,10 @@ import { AccountSettingsContextMenu } from "../context-menu/account-settings-con
 interface UserActionsProps {
   onLogout: () => void;
   user?: { avatar_url: string };
+  isLoading?: boolean;
 }
 
-export function UserActions({ onLogout, user }: UserActionsProps) {
+export function UserActions({ onLogout, user, isLoading }: UserActionsProps) {
   const [accountContextMenuIsVisible, setAccountContextMenuIsVisible] =
     React.useState(false);
 
@@ -26,7 +27,11 @@ export function UserActions({ onLogout, user }: UserActionsProps) {
 
   return (
     <div data-testid="user-actions" className="w-8 h-8 relative">
-      <UserAvatar avatarUrl={user?.avatar_url} onClick={toggleAccountMenu} />
+      <UserAvatar
+        avatarUrl={user?.avatar_url}
+        onClick={toggleAccountMenu}
+        isLoading={isLoading}
+      />
 
       {accountContextMenuIsVisible && (
         <AccountSettingsContextMenu