caching relevant users for my disposal and starting to render content

packages/web/components/Conversations/LiveRoom.tsx

@@ -1,24 +1,15 @@
 import Conversation from "@nirvana/common/models/conversation";
 import { Avatar } from "antd";
 import { FaWalking } from "react-icons/fa";
+import { MasterAvatarGroupWithUserFetch } from "../UserDetails/MasterAvatarGroup";
 
 export default function LiveRoom(props: { conversation: Conversation }) {
   return (
     <span className="group relative flex flex-row items-center bg-slate-50 rounded-lg border p-5 animate-pulse">
-      <Avatar.Group
-        maxCount={3}
-        size={{ xs: 1000 }}
-        maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
-      >
-        <Avatar
-          src="https://joeschmoe.io/api/v1/random"
-          style={{ backgroundColor: "cyan" }}
-        />
-        <Avatar src="https://joeschmoe.io/api/v1/100" />
-        <Avatar src="https://joeschmoe.io/api/v1/2" />
-        <Avatar src="https://joeschmoe.io/api/v1/10" />
-        <Avatar src="https://joeschmoe.io/api/v1/8" />
-      </Avatar.Group>
+      <MasterAvatarGroupWithUserFetch
+        listOfUserIds={props.conversation.membersInLiveRoom}
+        showCurrUser={true}
+      />
 
       <span className="text-md font-semibold ml-2 mr-10">Engineering</span>