Fix annoying Avatar flicker when loading (#7129)

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>
 

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