Update Profile Picture Default Stylings (#20589)

* refactor code for profile picture

* fix test

* minor fix

openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Users.spec.ts

@@ -470,11 +470,15 @@ test.describe('User Profile Feed Interactions', () => {
       '/api/v1/feed?type=Conversation&filterType=OWNER_OR_FOLLOWS&userId=*'
     );
 
-    await adminPage
+    const avatar = adminPage
       .locator('[data-testid="message-container"]')
       .first()
-      .locator('[data-testid="profile-avatar"]')
-      .click();
+      .locator('[data-testid="profile-avatar"]');
+
+    await avatar.hover();
+    await adminPage.waitForSelector('.ant-popover-card');
+    await adminPage.getByTestId('user-name').nth(1).click();
+
     await userDetailsResponse;
     await userFeedResponse;
     const response = await userDetailsResponse;

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardNew/ActivityFeedcardNew.component.tsx

@@ -38,7 +38,7 @@ import { getUserPath } from '../../../utils/RouterUtils';
 import searchClassBase from '../../../utils/SearchClassBase';
 import EntityPopOverCard from '../../common/PopOverCard/EntityPopOverCard';
 import UserPopOverCard from '../../common/PopOverCard/UserPopOverCard';
-import ProfilePictureNew from '../../common/ProfilePicture/ProfilePictureNew';
+import ProfilePicture from '../../common/ProfilePicture/ProfilePicture';
 import FeedCardBodyNew from '../ActivityFeedCard/FeedCardBody/FeedCardBodyNew';
 import FeedCardFooterNew from '../ActivityFeedCardV2/FeedCardFooter/FeedCardFooterNew';
 import ActivityFeedEditorNew from '../ActivityFeedEditor/ActivityFeedEditorNew';
@@ -203,12 +203,15 @@ const ActivityFeedCardNew = ({
               'items-start':
                 showThread && feed.entityRef?.type === EntityType.CONTAINER,
             })}>
-            <ProfilePictureNew
-              avatarType="outlined"
-              key={feed.id}
-              name={feed.createdBy ?? ''}
-              size={showThread ? 40 : 32}
-            />
+            <UserPopOverCard userName={feed.createdBy ?? ''}>
+              <div className="d-flex items-center">
+                <ProfilePicture
+                  key={feed.id}
+                  name={feed.createdBy ?? ''}
+                  width={showThread ? '40' : '32'}
+                />
+              </div>
+            </UserPopOverCard>
             <Space className="d-flex flex-col align-start gap-2" size={0}>
               <Space
                 className={classNames('d-flex align-center gap-2', {
@@ -307,12 +310,15 @@ const ActivityFeedCardNew = ({
           ) : (
             <div className="d-flex gap-2">
               <div>
-                <ProfilePictureNew
-                  avatarType="outlined"
-                  key={feed.id}
-                  name={getEntityName(currentUser)}
-                  size={32}
-                />
+                <UserPopOverCard userName={getEntityName(currentUser)}>
+                  <div className="d-flex items-center">
+                    <ProfilePicture
+                      key={feed.id}
+                      name={getEntityName(currentUser)}
+                      width="32"
+                    />
+                  </div>
+                </UserPopOverCard>
               </div>
 
               <Input

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardNew/CommentCard.component.tsx

@@ -34,7 +34,7 @@ import {
 } from '../../../utils/FeedUtils';
 import { getUserPath } from '../../../utils/RouterUtils';
 import UserPopOverCard from '../../common/PopOverCard/UserPopOverCard';
-import ProfilePictureNew from '../../common/ProfilePicture/ProfilePictureNew';
+import ProfilePicture from '../../common/ProfilePicture/ProfilePicture';
 import RichTextEditorPreviewerV1 from '../../common/RichTextEditor/RichTextEditorPreviewerV1';
 import FeedCardFooterNew from '../ActivityFeedCardV2/FeedCardFooter/FeedCardFooterNew';
 import ActivityFeedEditor from '../ActivityFeedEditor/ActivityFeedEditorNew';
@@ -137,12 +137,11 @@ const CommentCard = ({
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}>
       <div className="profile-picture m-r-xs">
-        <ProfilePictureNew
-          avatarType="outlined"
-          key={feed.id}
-          name={feed.updatedBy!}
-          size={32}
-        />
+        <UserPopOverCard userName={feed.updatedBy ?? ''}>
+          <div className="d-flex items-center">
+            <ProfilePicture key={feed.id} name={feed.updatedBy!} width="32" />
+          </div>
+        </UserPopOverCard>
       </div>
       <div className="w-full">
         <div className="d-flex items-center gap-2 flex-wrap">

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardBody/OwnerFeed/OwnersFeed.tsx

@@ -26,7 +26,8 @@ import { Owner } from '../../../../../generated/entity/feed/owner';
 import { Thread } from '../../../../../generated/entity/feed/thread';
 import { EntityReference } from '../../../../../generated/entity/type';
 import { UserAvatarGroup } from '../../../../common/OwnerLabel/UserAvatarGroup.component';
-import ProfilePictureNew from '../../../../common/ProfilePicture/ProfilePictureNew';
+import UserPopOverCard from '../../../../common/PopOverCard/UserPopOverCard';
+import ProfilePicture from '../../../../common/ProfilePicture/ProfilePicture';
 
 interface OwnersFeedProps {
   feed: Thread;
@@ -69,21 +70,21 @@ function OwnersFeed({
               {updatedOwner.length <= maxVisibleOwners ? (
                 <Row wrap align="middle">
                   {updatedOwner.map((owner: EntityReference) => (
-                    <div
-                      className={`owner-chip d-flex items-center ${
-                        showThread && 'bg-white'
-                      }`}
-                      key={owner.id}>
-                      <ProfilePictureNew
-                        displayName={owner.displayName}
-                        name={owner.name ?? ''}
-                        size={24}
-                        width="24"
-                      />
-                      <Typography.Text className="owner-chip-text">
-                        {owner.displayName}
-                      </Typography.Text>
-                    </div>
+                    <UserPopOverCard key={owner.id} userName={owner.name ?? ''}>
+                      <div
+                        className={`owner-chip d-flex items-center ${
+                          showThread && 'bg-white'
+                        }`}>
+                        <ProfilePicture
+                          displayName={owner.displayName}
+                          name={owner.name ?? ''}
+                          width="24"
+                        />
+                        <Typography.Text className="owner-chip-text">
+                          {owner.displayName}
+                        </Typography.Text>
+                      </div>
+                    </UserPopOverCard>
                   ))}
                 </Row>
               ) : (
@@ -111,21 +112,21 @@ function OwnersFeed({
               {previousOwner.length <= maxVisibleOwners ? (
                 <Row align="middle">
                   {previousOwner.map((owner: EntityReference) => (
-                    <div
-                      className={`owner-chip d-flex items-center ${
-                        showThread && 'bg-white'
-                      }`}
-                      key={owner.id}>
-                      <ProfilePictureNew
-                        displayName={owner.displayName}
-                        name={owner.name ?? ''}
-                        size={24}
-                        width="24"
-                      />
-                      <Typography.Text className="owner-chip-text">
-                        {owner.displayName}
-                      </Typography.Text>
-                    </div>
+                    <UserPopOverCard key={owner.id} userName={owner.name ?? ''}>
+                      <div
+                        className={`owner-chip d-flex items-center ${
+                          showThread && 'bg-white'
+                        }`}>
+                        <ProfilePicture
+                          displayName={owner.displayName}
+                          name={owner.name ?? ''}
+                          width="24"
+                        />
+                        <Typography.Text className="owner-chip-text">
+                          {owner.displayName}
+                        </Typography.Text>
+                      </div>
+                    </UserPopOverCard>
                   ))}
                 </Row>
               ) : (

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardFooter/FeedCardFooterNew.tsx

@@ -18,7 +18,8 @@ import React, { useCallback, useMemo } from 'react';
 import { ReactComponent as ThreadIcon } from '../../../../assets/svg/ic-reply-2.svg';
 import { ReactionOperation } from '../../../../enums/reactions.enum';
 import { ReactionType } from '../../../../generated/type/reaction';
-import ProfilePictureNew from '../../../common/ProfilePicture/ProfilePictureNew';
+import UserPopOverCard from '../../../common/PopOverCard/UserPopOverCard';
+import ProfilePicture from '../../../common/ProfilePicture/ProfilePicture';
 import { useActivityFeedProvider } from '../../ActivityFeedProvider/ActivityFeedProvider';
 import Reactions from '../../Reactions/Reactions';
 import { FeedCardFooterProps } from './FeedCardFooter.interface';
@@ -85,11 +86,11 @@ function FeedCardFooterNew({
                     }}
                     type="text"
                     onClick={isForFeedTab ? showReplies : undefined}>
-                    <ProfilePictureNew
-                      avatarType="outlined"
-                      name={user}
-                      size={20}
-                    />
+                    <UserPopOverCard userName={user}>
+                      <div className="d-flex items-center">
+                        <ProfilePicture name={user} width="20" />
+                      </div>
+                    </UserPopOverCard>
                   </Button>
                 ))}
               </Avatar.Group>

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/TaskFeedCard/TaskFeedCardNew.component.tsx

@@ -361,7 +361,7 @@ const TaskFeedCard = ({
                   }`}>
                   <AssigneesIcon height={20} width={20} />
                   <UserAvatarGroup
-                    avatarSize={24}
+                    avatarSize="24"
                     className="p-t-05"
                     owners={feed?.task?.assignees}
                   />

openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/TaskTabNew.component.tsx

@@ -126,7 +126,8 @@ import {
 } from '../../../../utils/EntityUtils';
 import { UserAvatarGroup } from '../../../common/OwnerLabel/UserAvatarGroup.component';
 import EntityPopOverCard from '../../../common/PopOverCard/EntityPopOverCard';
-import ProfilePictureNew from '../../../common/ProfilePicture/ProfilePictureNew';
+import UserPopOverCard from '../../../common/PopOverCard/UserPopOverCard';
+import ProfilePicture from '../../../common/ProfilePicture/ProfilePicture';
 import TaskTabIncidentManagerHeaderNew from '../TaskTabIncidentManagerHeader/TasktabIncidentManagerHeaderNew';
 import './task-tab-new.less';
 import { TaskTabProps } from './TaskTab.interface';
@@ -875,11 +876,11 @@ export const TaskTabNew = ({
             </Typography.Text>
           </Col>
           <Col className="flex items-center gap-2" span={16}>
-            <ProfilePictureNew
-              avatarType="outlined"
-              name={taskThread.createdBy ?? ''}
-              width="24"
-            />
+            <UserPopOverCard userName={taskThread.createdBy ?? ''}>
+              <div className="d-flex items-center">
+                <ProfilePicture name={taskThread.createdBy ?? ''} width="24" />
+              </div>
+            </UserPopOverCard>
             <Typography.Text>{taskThread.createdBy}</Typography.Text>
           </Col>
 
@@ -939,18 +940,25 @@ export const TaskTabNew = ({
               <Col className="flex items-center gap-2" span={16}>
                 {taskThread?.task?.assignees?.length === 1 ? (
                   <div className="d-flex items-center gap-2">
-                    <ProfilePictureNew
-                      avatarType="outlined"
-                      name={taskThread?.task?.assignees[0].displayName ?? ''}
-                      width="24"
-                    />
+                    <UserPopOverCard
+                      userName={
+                        taskThread?.task?.assignees[0].displayName ?? ''
+                      }>
+                      <div className="d-flex items-center">
+                        <ProfilePicture
+                          name={
+                            taskThread?.task?.assignees[0].displayName ?? ''
+                          }
+                          width="24"
+                        />
+                      </div>
+                    </UserPopOverCard>
                     <Typography.Text className="text-grey-body">
                       {taskThread?.task?.assignees[0].displayName}
                     </Typography.Text>
                   </div>
                 ) : (
                   <UserAvatarGroup
-                    avatarSize={24}
                     className="p-t-05"
                     owners={taskThread?.task?.assignees}
                   />
@@ -1114,12 +1122,15 @@ export const TaskTabNew = ({
               taskThread?.task?.status === ThreadTaskStatus.Open && (
                 <div className="d-flex gap-2">
                   <div className="profile-picture">
-                    <ProfilePictureNew
-                      avatarType="outlined"
-                      key={taskThread.id}
-                      name={getEntityName(currentUser)}
-                      size={32}
-                    />
+                    <UserPopOverCard userName={getEntityName(currentUser)}>
+                      <div className="d-flex items-center">
+                        <ProfilePicture
+                          key={taskThread.id}
+                          name={getEntityName(currentUser)}
+                          width="32"
+                        />
+                      </div>
+                    </UserPopOverCard>
                   </div>
 
                   <Input

openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTabIncidentManagerHeader/TasktabIncidentManagerHeaderNew.tsx

@@ -28,7 +28,8 @@ import { getEntityName } from '../../../../utils/EntityUtils';
 import { useActivityFeedProvider } from '../../../ActivityFeed/ActivityFeedProvider/ActivityFeedProvider';
 
 import { UserAvatarGroup } from '../../../common/OwnerLabel/UserAvatarGroup.component';
-import ProfilePictureNew from '../../../common/ProfilePicture/ProfilePictureNew';
+import UserPopOverCard from '../../../common/PopOverCard/UserPopOverCard';
+import ProfilePicture from '../../../common/ProfilePicture/ProfilePicture';
 import RichTextEditorPreviewerV1 from '../../../common/RichTextEditor/RichTextEditorPreviewerV1';
 import Severity from '../../../DataQuality/IncidentManager/Severity/Severity.component';
 import './task-tab-incident-manager-header.style.less';
@@ -128,11 +129,11 @@ const TaskTabIncidentManagerHeaderNew = ({ thread }: { thread: Thread }) => {
           </Typography.Text>
         </Col>
         <Col className="flex items-center gap-2" span={16}>
-          <ProfilePictureNew
-            avatarType="outlined"
-            name={thread.createdBy ?? ''}
-            width="24"
-          />
+          <UserPopOverCard userName={thread.createdBy ?? ''}>
+            <div className="d-flex items-center">
+              <ProfilePicture name={thread.createdBy ?? ''} width="24" />
+            </div>
+          </UserPopOverCard>
           <Typography.Text>{thread.createdBy}</Typography.Text>
         </Col>
         <Col className="flex items-center gap-2 text-grey-muted" span={8}>
@@ -144,18 +145,21 @@ const TaskTabIncidentManagerHeaderNew = ({ thread }: { thread: Thread }) => {
         <Col className="flex items-center gap-2" span={16}>
           {thread?.task?.assignees?.length === 1 ? (
             <div className="d-flex items-center gap-2">
-              <ProfilePictureNew
-                avatarType="outlined"
-                name={thread?.task?.assignees[0].displayName ?? ''}
-                width="24"
-              />
+              <UserPopOverCard
+                userName={thread?.task?.assignees[0].displayName ?? ''}>
+                <div className="d-flex items-center">
+                  <ProfilePicture
+                    name={thread?.task?.assignees[0].displayName ?? ''}
+                    width="24"
+                  />
+                </div>
+              </UserPopOverCard>
               <Typography.Text className="text-grey-body">
                 {thread?.task?.assignees[0].displayName}
               </Typography.Text>
             </div>
           ) : (
             <UserAvatarGroup
-              avatarSize={24}
               className="p-t-05"
               owners={thread?.task?.assignees}
             />

openmetadata-ui/src/main/resources/ui/src/components/ProfileCard/ProfileSectionUserDetailsCard.component.tsx

@@ -35,7 +35,8 @@ import { changePassword } from '../../rest/auth-API';
 import { getEntityName } from '../../utils/EntityUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 import DeleteWidgetModal from '../common/DeleteWidget/DeleteWidgetModal';
-import ProfilePictureNew from '../common/ProfilePicture/ProfilePictureNew';
+import UserPopOverCard from '../common/PopOverCard/UserPopOverCard';
+import ProfilePicture from '../common/ProfilePicture/ProfilePicture';
 import { ProfileEditModal } from '../Modals/ProfileEditModal/ProfileEditModal';
 import ChangePasswordForm from '../Settings/Users/ChangePasswordForm';
 import './profile-details.less';
@@ -237,12 +238,15 @@ const ProfileSectionUserDetailsCard = ({
       </Popover>
 
       <div className="m-t-sm">
-        <ProfilePictureNew
-          avatarType="outlined"
-          data-testid="replied-user"
-          name={getEntityName(userData)}
-          width="80"
-        />
+        <UserPopOverCard userName={getEntityName(userData)}>
+          <div className="d-flex items-center">
+            <ProfilePicture
+              data-testid="replied-user"
+              name={getEntityName(userData)}
+              width="80"
+            />
+          </div>
+        </UserPopOverCard>
       </div>
       <div>
         <p className="profile-details-title" data-testid="user-display-name">

openmetadata-ui/src/main/resources/ui/src/components/common/OwnerLabel/UserAvatarGroup.component.tsx

@@ -18,7 +18,8 @@ import React, { ReactNode, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as IconUser } from '../../../assets/svg/user.svg';
 import { EntityReference } from '../../../generated/entity/data/table';
-import ProfilePictureNew from '../ProfilePicture/ProfilePictureNew';
+import UserPopOverCard from '../PopOverCard/UserPopOverCard';
+import ProfilePicture from '../ProfilePicture/ProfilePicture';
 import './owner-label.less';
 
 export const UserAvatarGroup = ({
@@ -29,7 +30,7 @@ export const UserAvatarGroup = ({
   ownerDisplayName,
   placeHolder,
   maxVisibleOwners = 2,
-  avatarSize = 24,
+  avatarSize = '24',
 }: {
   owners?: EntityReference[];
   className?: string;
@@ -43,7 +44,7 @@ export const UserAvatarGroup = ({
     team: boolean;
   };
   tooltipText?: string;
-  avatarSize?: number;
+  avatarSize?: string;
 }) => {
   const { t } = useTranslation();
 
@@ -57,11 +58,15 @@ export const UserAvatarGroup = ({
         key: owner.id,
         label: (
           <div className="d-flex items-center gap-2">
-            <ProfilePictureNew
-              avatarType="outlined"
-              name={owner.displayName ?? ''}
-              size={avatarSize}
-            />
+            <UserPopOverCard userName={owner.displayName ?? ''}>
+              <div className="d-flex items-center">
+                <ProfilePicture
+                  displayName={owner.displayName ?? ''}
+                  name={owner.displayName ?? ''}
+                  width={avatarSize}
+                />
+              </div>
+            </UserPopOverCard>
             <Typography.Text>{owner.displayName}</Typography.Text>
           </div>
         ),
@@ -79,19 +84,22 @@ export const UserAvatarGroup = ({
           <Avatar.Group className="avatar-group">
             {visibleOwners.map((owner) => (
               <div className="avatar-overlap" key={owner.id}>
-                <ProfilePictureNew
-                  avatarType="outlined"
-                  displayName={owner.displayName ?? ''}
-                  name={owner.name ?? ''}
-                  size={avatarSize}
-                />
+                <UserPopOverCard userName={owner.displayName ?? ''}>
+                  <div className="d-flex items-center">
+                    <ProfilePicture
+                      displayName={owner.displayName ?? ''}
+                      name={owner.name ?? ''}
+                      width={avatarSize}
+                    />
+                  </div>
+                </UserPopOverCard>
               </div>
             ))}
             {remainingOwnersCount > 0 && (
               <Dropdown menu={remainingOwnersMenu} trigger={['click']}>
                 <Avatar
                   className="owner-count-avatar avatar-overlap"
-                  size={avatarSize}>
+                  size={Number(avatarSize)}>
                   <span>
                     {t('label.plus-symbol')}
                     {remainingOwnersCount}

openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/UserPopOverCard.tsx

@@ -206,7 +206,9 @@ const PopoverTitle = React.memo(
               e.stopPropagation();
               onTitleClickHandler(getUserPath(name));
             }}>
-            <span className="font-medium m-r-xs">{displayName}</span>
+            <span className="font-medium m-r-xs" data-testid="user-name">
+              {displayName}
+            </span>
           </Button>
           {displayName !== name ? (
             <span className="text-grey-muted">{name}</span>

openmetadata-ui/src/main/resources/ui/src/components/common/ProfilePicture/ProfilePicture.tsx

@@ -45,7 +45,7 @@ const ProfilePicture = ({
   height,
   isTeam = false,
   size,
-  avatarType = 'solid',
+  avatarType = 'outlined',
 }: Props) => {
   const { permissions } = usePermissionProvider();
   const { color, character, backgroundColor } = getRandomColor(

openmetadata-ui/src/main/resources/ui/src/components/common/ProfilePicture/ProfilePictureNew.tsx

@@ -1,137 +0,0 @@
-/*
- *  Copyright 2022 Collate.
- *  Licensed under the Apache License, Version 2.0 (the "License");
- *  you may not use this file except in compliance with the License.
- *  You may obtain a copy of the License at
- *  http://www.apache.org/licenses/LICENSE-2.0
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the License is distributed on an "AS IS" BASIS,
- *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *  See the License for the specific language governing permissions and
- *  limitations under the License.
- */
-
-import { Avatar, Tooltip } from 'antd';
-import classNames from 'classnames';
-import { parseInt } from 'lodash';
-import { ImageShape } from 'Models';
-import React, { useMemo } from 'react';
-import { Link } from 'react-router-dom';
-import { usePermissionProvider } from '../../../context/PermissionProvider/PermissionProvider';
-import { ResourceEntity } from '../../../context/PermissionProvider/PermissionProvider.interface';
-import { User } from '../../../generated/entity/teams/user';
-import { useUserProfile } from '../../../hooks/user-profile/useUserProfile';
-import { getRandomColor } from '../../../utils/CommonUtils';
-import { userPermissions } from '../../../utils/PermissionsUtils';
-import { getUserPath } from '../../../utils/RouterUtils';
-import Loader from '../Loader/Loader';
-import UserPopOverCard from '../PopOverCard/UserPopOverCard';
-
-type UserData = Pick<User, 'name' | 'displayName'>;
-
-interface Props extends UserData {
-  width?: string;
-  type?: ImageShape;
-  className?: string;
-  height?: string;
-  isTeam?: boolean;
-  size?: number | 'small' | 'default' | 'large';
-  avatarType?: 'solid' | 'outlined';
-}
-
-const ProfilePictureNew = ({
-  name,
-  displayName,
-  className = '',
-  type = 'circle',
-  width = '36',
-  height,
-  isTeam = false,
-  size,
-  avatarType = 'solid',
-}: Props) => {
-  const { permissions } = usePermissionProvider();
-  const { color, character, backgroundColor } = getRandomColor(
-    displayName ?? name
-  );
-
-  const viewUserPermission = useMemo(() => {
-    return userPermissions.hasViewPermissions(ResourceEntity.USER, permissions);
-  }, [permissions]);
-
-  const [profileURL, isPicLoading] = useUserProfile({
-    permission: viewUserPermission,
-    name,
-    isTeam,
-  });
-
-  const getAvatarByName = () => {
-    const avatar = (
-      <Avatar
-        className={classNames('flex-center', className)}
-        data-testid="profile-avatar"
-        icon={character}
-        shape={type}
-        size={size ?? parseInt(width)}
-        style={{
-          color: avatarType === 'solid' ? 'default' : color,
-          backgroundColor: avatarType === 'solid' ? color : backgroundColor,
-          fontWeight: avatarType === 'solid' ? 400 : 500,
-          border: `0.5px solid ${avatarType === 'solid' ? 'default' : color}`,
-        }}
-      />
-    );
-
-    return (
-      <UserPopOverCard userName={name ?? ''}>
-        <Link className="no-underline" to={getUserPath(name ?? '')}>
-          {avatar}
-        </Link>
-      </UserPopOverCard>
-    );
-  };
-
-  const getAvatarElement = () => {
-    return isPicLoading ? (
-      <div
-        className="d-inline-block relative"
-        style={{
-          height: typeof size === 'number' ? `${size}px` : height,
-          width: typeof size === 'number' ? `${size}px` : width,
-        }}>
-        {getAvatarByName()}
-        <div
-          className="absolute inset-0 opacity-60 bg-grey-4 rounded-full"
-          data-testid="loader-cntnr">
-          <Loader
-            className="absolute inset-0"
-            size="small"
-            style={{
-              height: typeof size === 'number' ? `${size}px` : `${+width}px`,
-              width: typeof size === 'number' ? `${size}px` : `${+width}px`,
-            }}
-            type="white"
-          />
-        </div>
-      </div>
-    ) : (
-      getAvatarByName()
-    );
-  };
-
-  return profileURL ? (
-    <Tooltip placement="top" title={displayName ?? name}>
-      <Avatar
-        className={className}
-        data-testid="profile-image"
-        shape={type}
-        size={size ?? parseInt(width)}
-        src={profileURL}
-      />
-    </Tooltip>
-  ) : (
-    getAvatarElement()
-  );
-};
-
-export default ProfilePictureNew;