fix: hydration mismatch error in UserAvatarGroup component (calcom#23425)

Author: hbjORbj

packages/ui/components/avatar/UserAvatarGroup.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from "react";
+
 import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
 import { getBookerBaseUrlSync } from "@calcom/lib/getBookerUrl/client";
 import type { User } from "@calcom/prisma/client";
@@ -8,24 +10,42 @@ import { AvatarGroup } from "./AvatarGroup";
 type UserAvatarProps = Omit<React.ComponentProps<typeof AvatarGroup>, "items"> & {
   users: (Pick<User, "name" | "username" | "avatarUrl"> & {
     profile: Omit<UserProfile, "upId">;
-    hideTruncatedAvatarsCount?: boolean;
   })[];
 };
+
+type AvatarItem = {
+  href: string | null;
+  alt: string;
+  title: string;
+  image: string;
+};
+
 export function UserAvatarGroup(props: UserAvatarProps) {
   const { users, ...rest } = props;
 
-  return (
-    <AvatarGroup
-      {...rest}
-      items={users.map((user) => ({
-        href: `${getBookerBaseUrlSync(user.profile?.organization?.slug ?? null)}/${
-          user.profile?.username
-        }?redirect=false`,
-        alt: user.name || "",
-        title: user.name || "",
-        image: getUserAvatarUrl(user),
-        hideTruncatedAvatarsCount: user.hideTruncatedAvatarsCount,
-      }))}
-    />
+  const [items, setItems] = useState<AvatarItem[]>(
+    users.map((user) => ({
+      href: null,
+      alt: user.name || "",
+      title: user.name || "",
+      image: getUserAvatarUrl(user),
+    }))
   );
+
+  useEffect(() => {
+    setItems(
+      users.map((user) => {
+        return {
+          href: `${getBookerBaseUrlSync(user.profile?.organization?.slug ?? null)}/${
+            user.profile?.username
+          }?redirect=false`,
+          alt: user.name || "",
+          title: user.name || "",
+          image: getUserAvatarUrl(user),
+        };
+      })
+    );
+  }, [users]);
+
+  return <AvatarGroup {...rest} items={items} />;
 }