⚡️(frontend) memoize the ParticipantName component

Memoize the ParticipantName component so it does not re-render on
unrelated parent updates when its props have not changed.

src/frontend/src/features/rooms/livekit/components/ParticipantName.tsx

@@ -1,8 +1,6 @@
-import type { CSSProperties } from 'react'
+import React, { CSSProperties } from 'react'
 import { Text } from '@/primitives'
 import { useTranslation } from 'react-i18next'
-import { useParticipantInfo } from '@livekit/components-react'
-import type { Participant } from 'livekit-client'
 
 const participantNameStyles: CSSProperties = {
   paddingBottom: '0.1rem',
@@ -16,29 +14,29 @@ const participantNameScreenShareStyles: CSSProperties = {
   marginLeft: '0.4rem',
 }
 
-export const ParticipantName = ({
+export const ParticipantName = React.memo(
-  participant,
+  ({
-  isScreenShare = false,
+    displayedName,
-}: {
+    isScreenShare = false,
-  participant: Participant
+  }: {
-  isScreenShare: boolean
+    displayedName?: string
-}) => {
+    isScreenShare: boolean
-  const { t } = useTranslation('rooms', { keyPrefix: 'participantTile' })
+  }) => {
+    const { t } = useTranslation('rooms', { keyPrefix: 'participantTile' })
+    if (isScreenShare) {
+      return (
+        <Text variant="sm" style={participantNameScreenShareStyles}>
+          {t('screenShare', { name: displayedName })}
+        </Text>
+      )
+    }
 
-  const { identity, name } = useParticipantInfo({ participant })
-  const displayedName = name != '' ? name : identity
-
-  if (isScreenShare) {
     return (
-      <Text variant="sm" style={participantNameScreenShareStyles}>
+      <Text variant="sm" style={participantNameStyles} aria-hidden="true">
-        {t('screenShare', { name: displayedName })}
+        {displayedName}
       </Text>
     )
   }
+)
 
-  return (
+ParticipantName.displayName = 'ParticipantName'
-    <Text variant="sm" style={participantNameStyles} aria-hidden="true">
-      {displayedName}
-    </Text>
-  )
-}

src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx

@@ -12,6 +12,7 @@ import {
   VideoTrack,
   TrackRefContext,
   ParticipantContextIfNeeded,
+  useParticipantInfo,
 } from '@livekit/components-react'
 import React from 'react'
 import {
@@ -74,9 +75,12 @@ export const ParticipantTile: (
   ref
 ) {
   const { pinnedTrackRef } = useSnapshot(layoutStore)
-
   const trackReference = useEnsureTrackRef(trackRef)
 
+  const { identity, name } = useParticipantInfo({
+    participant: trackReference.participant,
+  })
+
   const { elementProps } = useParticipantTile<HTMLDivElement>({
     htmlProps,
     disableSpeakingIndicator,
@@ -222,8 +226,8 @@ export const ParticipantTile: (
                       )}
                       <div className="lk-participant-name-wrapper">
                         <ParticipantName
+                          displayedName={name != '' ? name : identity}
                           isScreenShare={isScreenShare}
-                          participant={trackReference.participant}
                         />
                       </div>
                     </div>