⚡️(frontend) memoize the Avatar component

The Avatar component is simple and stateless. Memoize it to avoid
unnecessary re-renders when its props have not changed.

src/frontend/src/components/Avatar.tsx

@@ -49,32 +49,29 @@ export type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {
   bgColor?: string
 } & RecipeVariantProps<typeof avatar>
 
-export const Avatar = ({
+export const Avatar = React.memo(
-  name,
+  ({ name, bgColor, context, notification, style, ...props }: AvatarProps) => {
-  bgColor,
+    const initial = name?.trim()?.charAt(0) ?? ''
-  context,
+    return (
-  notification,
+      <div
-  style,
+        style={{
-  ...props
+          backgroundColor: bgColor,
-}: AvatarProps) => {
+          ...style,
-  const initial = name?.trim()?.charAt(0) ?? ''
+        }}
-  return (
+        className={avatar({ context, notification })}
-    <div
+        {...props}
-      style={{
-        backgroundColor: bgColor,
-        ...style,
-      }}
-      className={avatar({ context, notification })}
-      {...props}
-    >
-      <span
-        aria-hidden="true"
-        className={css({
-          marginTop: '-0.3rem',
-        })}
       >
-        {initial}
+        <span
-      </span>
+          aria-hidden="true"
-    </div>
+          className={css({
-  )
+            marginTop: '-0.3rem',
-}
+          })}
+        >
+          {initial}
+        </span>
+      </div>
+    )
+  }
+)
+
+Avatar.displayName = 'Avatar'