From 8845e736e592353a01298bb78bd8be2c84c72113 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Fri, 29 Aug 2025 08:29:00 -0400
Subject: [PATCH] fix: hydration mismatch error in UserAvatarGroup component
 (#23425)

---
 .../ui/components/avatar/UserAvatarGroup.tsx  | 48 +++++++++++++------
 1 file changed, 34 insertions(+), 14 deletions(-)

diff --git a/packages/ui/components/avatar/UserAvatarGroup.tsx b/packages/ui/components/avatar/UserAvatarGroup.tsx
index 544fbcef4a..fa30a6a27c 100644
--- a/packages/ui/components/avatar/UserAvatarGroup.tsx
+++ b/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} />;
 }