fix: ptimization of avatar taking values

ui/src/components/BaseUserCard/index.tsx

@@ -9,6 +9,7 @@ interface Props {
   data: any;
   showAvatar?: boolean;
   avatarSize?: string;
+  avatarSearchStr?: string;
   className?: string;
 }
 
@@ -17,20 +18,31 @@ const Index: FC<Props> = ({
   showAvatar = true,
   avatarSize = '20px',
   className = 'fs-14',
+  avatarSearchStr = 's=48',
 }) => {
   return (
     <div className={`text-secondary ${className}`}>
       {data?.status !== 'deleted' ? (
         <Link to={`/users/${data?.username}`}>
           {showAvatar && (
-            <Avatar avatar={data?.avatar} size={avatarSize} className="me-1" />
+            <Avatar
+              avatar={data?.avatar}
+              size={avatarSize}
+              className="me-1"
+              searchStr={avatarSearchStr}
+            />
           )}
           <span className="me-1 text-break">{data?.display_name}</span>
         </Link>
       ) : (
         <>
           {showAvatar && (
-            <Avatar avatar={data?.avatar} size={avatarSize} className="me-1" />
+            <Avatar
+              avatar={data?.avatar}
+              size={avatarSize}
+              className="me-1"
+              searchStr={avatarSearchStr}
+            />
           )}
           <span className="me-1 text-break">{data?.display_name}</span>
         </>

ui/src/components/Header/components/NavItems/index.tsx

@@ -43,7 +43,7 @@ const Index: FC<Props> = ({ redDot, userInfo, logOut }) => {
           id="dropdown-basic"
           as="a"
           className="no-toggle pointer">
-          <Avatar size="36px" avatar={userInfo?.avatar} />
+          <Avatar size="36px" avatar={userInfo?.avatar} searchStr="s=48" />
         </Dropdown.Toggle>
 
         <Dropdown.Menu>

ui/src/components/UserCard/index.tsx

@@ -23,16 +23,23 @@ const Index: FC<Props> = ({ data, time, preFix, className = '' }) => {
             avatar={data?.avatar}
             size="40px"
             className="me-2 d-none d-md-block"
+            searchStr="s=48"
           />
 
           <Avatar
             avatar={data?.avatar}
             size="24px"
             className="me-2 d-block d-md-none"
+            searchStr="s=48"
           />
         </Link>
       ) : (
-        <Avatar avatar={data?.avatar} size="40px" className="me-2" />
+        <Avatar
+          avatar={data?.avatar}
+          size="40px"
+          className="me-2"
+          searchStr="s=48"
+        />
       )}
       <div className="fs-14 text-secondary d-flex flex-row flex-md-column align-items-center align-items-md-start">
         <div className="me-1 me-md-0">

ui/src/pages/Admin/Users/index.tsx

@@ -107,6 +107,7 @@ const Users: FC = () => {
                     data={user}
                     className="fs-6"
                     avatarSize="24px"
+                    avatarSearchStr="s=48"
                   />
                 </td>
                 <td>{user.rank}</td>

ui/src/pages/Users/Personal/components/UserInfo/index.tsx

@@ -19,10 +19,10 @@ const Index: FC<Props> = ({ data }) => {
     <div className="d-flex mb-4">
       {data?.status !== 'deleted' ? (
         <Link to={`/users/${data.username}`} reloadDocument>
-          <Avatar avatar={data.avatar} size="160px" />
+          <Avatar avatar={data.avatar} size="160px" searchStr="s=128" />
         </Link>
       ) : (
-        <Avatar avatar={data.avatar} size="160px" />
+        <Avatar avatar={data.avatar} size="160px" searchStr="s=128" />
       )}
 
       <div className="ms-4">