adding deboucing and cleaning up flow

packages/desktop/src/components/User/basicUserDetailsRow.tsx

@@ -1,9 +1,10 @@
+import { Avatar, Tooltip } from "antd";
+
 import { FaAngleRight } from "react-icons/fa";
 import { ReactElement } from "react";
-import { Tooltip } from "antd";
 import { User } from "@nirvana/core/models/user.model";
 
-export default function UserRow({
+export default function BasicUserRow({
   user,
   rightJsx,
 }: {
@@ -13,20 +14,19 @@ export default function UserRow({
   return (
     <span
       key={user._id.toString() + new Date().toDateString()}
-      className="border-t border-t-zinc-500 py-3 px-2 flex flex-row justify-start 
-    items-center w-full hover:bg-zinc-600 cursor-pointer group"
+      className="border-t border-t-gray-200 py-3 px-2 flex flex-row justify-start 
+    items-center w-full hover:bg-gray-300 cursor-pointer group"
     >
-      <span className="relative mx-5">
-        <img
-          src={user.picture}
-          className="rounded-lg h-8 hover:bg-zinc-200 hover:cursor-pointer hover:scale-110"
-          alt=""
-        />
-        <span className="absolute bottom-0 -right-1.5 rounded-full bg-emerald-600 h-3 w-3"></span>
-      </span>
+      <Avatar
+        key={`searchUsers-${user._id.toString()}`}
+        shape="square"
+        src={user.picture}
+        size="default"
+        className="shadow-lg mx-5"
+      />
 
       <span className="flex flex-col items-start">
-        <span className="text-zinc-200 text-lg font-semibold">{user.name}</span>
+        <span className="text-gray-500 text-lg font-semibold">{user.name}</span>
 
         <span className="text-zinc-300">{user.email}</span>
       </span>

packages/desktop/src/components/header/index.tsx

@@ -153,6 +153,7 @@ export default function NirvanaHeader({
             {userDetailsRes?.user?.picture &&
               mediaSettings.mode === "audio" && (
                 <Avatar
+                  key={`userHeaderProfilePicture`}
                   className="mr-1 shadow-md"
                   alt={userDetailsRes?.user?.givenName}
                   src={userDetailsRes?.user?.picture}

packages/desktop/src/components/lines/lineIcon/index.tsx

@@ -14,8 +14,13 @@ export default function LineIcon({ sourceImages }: { sourceImages: string[] }) {
       }}
       className="shadow-lg"
     >
-      {sourceImages?.map((avatarSrc) => (
-        <Avatar src={avatarSrc} shape="square" size={"default"} />
+      {sourceImages?.map((avatarSrc, index) => (
+        <Avatar
+          key={`lineIcon-${avatarSrc}-${index}`}
+          src={avatarSrc}
+          shape="square"
+          size={"default"}
+        />
       ))}
     </Avatar.Group>
   );

packages/desktop/src/components/lines/lineRow.tsx/index.tsx

@@ -54,8 +54,13 @@ export default function LineRow({
           }}
           className="shadow-lg"
         >
-          {lineDetails.profilePicsLiveBroadcasters.map((avatarSrc) => (
-            <Avatar src={avatarSrc} shape="square" size={"small"} />
+          {lineDetails.profilePicsLiveBroadcasters.map((avatarSrc, index) => (
+            <Avatar
+              key={`lineListActivitySection-${avatarSrc}-${index}`}
+              src={avatarSrc}
+              shape="square"
+              size={"small"}
+            />
           ))}
         </Avatar.Group>
       );