maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Omar López 2022-08-25 13:35:01 -06:00 committed by GitHub
parent b84c8d9e82
commit 18c949207e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/ui/v2/core/Avatar.tsx
View File

@ -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>