Improves UI stability of availability page. No CLS now. (#3347)

apps/web/components/ui/Avatar.tsx

@@ -15,6 +15,9 @@ export type AvatarProps = {
   gravatarFallbackMd5?: string;
 };
 
+/**
+ * @deprecated Use AvatarSSR instead. Once, there is no usage of Avatar, AvatarSSR can be renamed.
+ */
 export default function Avatar(props: AvatarProps) {
   const { imageSrc, gravatarFallbackMd5, size, alt, title } = props;
   const className = classNames("rounded-full", props.className, size && `h-${size} w-${size}`);

apps/web/components/ui/AvatarGroup.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import classNames from "@lib/classNames";
 
 import Avatar from "@components/ui/Avatar";
+import { AvatarSSR } from "@components/ui/AvatarSSR";
 
 export type AvatarGroupProps = {
   border?: string; // this needs to be the color of the parent container background, i.e.: border-white dark:border-gray-900
@@ -23,7 +24,7 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
         if (item.image != null) {
           return (
             <li key={idx} className="-mr-2 inline-block">
-              <Avatar
+              <AvatarSSR
                 className={props.border}
                 imageSrc={item.image}
                 title={item.title}

apps/web/components/ui/AvatarSSR.tsx

@@ -1,9 +1,17 @@
 import { User } from "@prisma/client";
+import * as Tooltip from "@radix-ui/react-tooltip";
 
 import classNames from "@lib/classNames";
 
-export type AvatarProps = {
-  user: Pick<User, "name" | "username" | "avatar"> & { emailMd5?: string };
+export type AvatarProps = (
+  | {
+      user: Pick<User, "name" | "username" | "avatar"> & { emailMd5?: string };
+    }
+  | {
+      user?: null;
+      imageSrc: string;
+    }
+) & {
   className?: string;
   size?: number;
   title?: string;
@@ -16,18 +24,38 @@ function defaultAvatarSrc(md5: string) {
 }
 
 // An SSR Supported version of Avatar component.
-// FIXME: title support is missing
 export function AvatarSSR(props: AvatarProps) {
-  const { user, size } = props;
-  const nameOrUsername = user.name || user.username || "";
-  const className = classNames("rounded-full", props.className, size && `h-${size} w-${size}`);
-  let imgSrc;
-  const alt = props.alt || nameOrUsername;
-  if (user.avatar) {
-    imgSrc = user.avatar;
-  } else if (user.emailMd5) {
-    imgSrc = defaultAvatarSrc(user.emailMd5);
+  const { size, title } = props;
+
+  let imgSrc = "";
+  let alt: string = props.alt;
+
+  if (props.user) {
+    const user = props.user;
+    const nameOrUsername = user.name || user.username || "";
+    alt = alt || nameOrUsername;
+
+    if (user.avatar) {
+      imgSrc = user.avatar;
+    } else if (user.emailMd5) {
+      imgSrc = defaultAvatarSrc(user.emailMd5);
+    }
+  } else {
+    imgSrc = props.imageSrc;
   }
-  // eslint-disable-next-line @next/next/no-img-element
-  return imgSrc ? <img alt={alt} className={className} src={imgSrc} /> : null;
+
+  const className = classNames("rounded-full", props.className, size && `h-${size} w-${size}`);
+
+  const avatar = imgSrc ? <img alt={alt} className={className} src={imgSrc} /> : null;
+  return title ? (
+    <Tooltip.Tooltip delayDuration={300}>
+      <Tooltip.TooltipTrigger className="cursor-default">{avatar}</Tooltip.TooltipTrigger>
+      <Tooltip.Content className="rounded-sm bg-black p-2 text-sm text-white shadow-sm">
+        <Tooltip.Arrow />
+        {title}
+      </Tooltip.Content>
+    </Tooltip.Tooltip>
+  ) : (
+    <>{avatar}</>
+  );
 }