From 18c949207e7f4c3bcc29cbee963917c9485ef48c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20L=C3=B3pez?= <zomars@me.com>
Date: Thu, 25 Aug 2022 13:35:01 -0600
Subject: [PATCH] Fixes CLS when loading Avatars (#3973)

* Fixes CLS when loading Avatars

* Update packages/ui/v2/core/Avatar.tsx

Co-authored-by: Leo Giovanetti <hello@leog.me>

Co-authored-by: Leo Giovanetti <hello@leog.me>
---
 packages/ui/v2/core/Avatar.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/ui/v2/core/Avatar.tsx b/packages/ui/v2/core/Avatar.tsx
index 74cfe2183f..63c88c2bf0 100644
--- a/packages/ui/v2/core/Avatar.tsx
+++ b/packages/ui/v2/core/Avatar.tsx
@@ -18,20 +18,24 @@ export type AvatarProps = {
 };
 
 const sizesPropsBySize = {
-  sm: "w-6",
-  md: "w-8",
-  lg: "w-16",
-};
+  sm: "w-6", // 24px
+  md: "w-8", // 32px
+  lg: "w-16", // 64px
+} as const;
 
 export default function Avatar(props: AvatarProps) {
   const { imageSrc, gravatarFallbackMd5, size, alt, title } = props;
-  const rootClass = classNames("rounded-full", sizesPropsBySize[props.size], "h-auto");
+  const sizeClassname = sizesPropsBySize[size];
+  const rootClass = classNames("rounded-full aspect-square", sizeClassname, "h-auto");
   const avatar = (
-    <AvatarPrimitive.Root className={classNames("relative inline-block overflow-hidden ")}>
+    <AvatarPrimitive.Root
+      className={classNames(
+        sizeClassname,
+        "relative inline-block aspect-square overflow-hidden rounded-full bg-gray-300"
+      )}>
       <AvatarPrimitive.Image src={imageSrc ?? undefined} alt={alt} className={rootClass} />
       <AvatarPrimitive.Fallback delayMs={600}>
         {gravatarFallbackMd5 && (
-          // eslint-disable-next-line @next/next/no-img-element
           <img src={defaultAvatarSrc({ md5: gravatarFallbackMd5 })} alt={alt} className={rootClass} />
         )}
       </AvatarPrimitive.Fallback>