From 4e7200a44bc87dcd1ace812ea4f01768b85b07ce Mon Sep 17 00:00:00 2001
From: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>
Date: Wed, 21 Sep 2022 00:53:31 -0400
Subject: [PATCH] show avatar placeholder in settings shell (#4639)

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
---
 packages/ui/v2/core/layouts/SettingsLayout.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/ui/v2/core/layouts/SettingsLayout.tsx b/packages/ui/v2/core/layouts/SettingsLayout.tsx
index a32d6686af..01b01cd5b0 100644
--- a/packages/ui/v2/core/layouts/SettingsLayout.tsx
+++ b/packages/ui/v2/core/layouts/SettingsLayout.tsx
@@ -5,6 +5,7 @@ import React, { ComponentProps, useEffect, useState } from "react";
 
 import { classNames } from "@calcom/lib";
 import { WEBAPP_URL } from "@calcom/lib/constants";
+import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/v2/core/Button";
@@ -194,13 +195,11 @@ const SettingsSidebarContainer = ({ className = "" }) => {
                                   <Icon.FiChevronRight />
                                 )}
                               </div>
-                              {team.logo && (
-                                <img
-                                  src={team.logo}
-                                  className="mt-2 ml-[12px] mr-[8px] h-[16px] w-[16px] self-start stroke-[2px] md:mt-0"
-                                  alt={team.name || "Team logo"}
-                                />
-                              )}
+                              <img
+                                src={getPlaceholderAvatar(team.logo, team?.name as string)}
+                                className="mt-2 ml-[12px] mr-[8px] h-[16px] w-[16px] self-start stroke-[2px] md:mt-0"
+                                alt={team.name || "Team logo"}
+                              />
                               <p>{team.name}</p>
                               {!team.accepted && (
                                 <Badge className="ml-3" variant="orange">