diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantName.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantName.tsx
index cc1d866d..91836a66 100644
--- a/src/frontend/src/features/rooms/livekit/components/ParticipantName.tsx
+++ b/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 = ({
- participant,
- isScreenShare = false,
-}: {
- participant: Participant
- isScreenShare: boolean
-}) => {
- const { t } = useTranslation('rooms', { keyPrefix: 'participantTile' })
+export const ParticipantName = React.memo(
+ ({
+ displayedName,
+ isScreenShare = false,
+ }: {
+ displayedName?: string
+ isScreenShare: boolean
+ }) => {
+ const { t } = useTranslation('rooms', { keyPrefix: 'participantTile' })
+ if (isScreenShare) {
+ return (
+
+ {t('screenShare', { name: displayedName })}
+
+ )
+ }
- const { identity, name } = useParticipantInfo({ participant })
- const displayedName = name != '' ? name : identity
-
- if (isScreenShare) {
return (
-
- {t('screenShare', { name: displayedName })}
+
+ {displayedName}
)
}
+)
- return (
-
- {displayedName}
-
- )
-}
+ParticipantName.displayName = 'ParticipantName'
diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
index f6e071da..e757ea26 100644
--- a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
+++ b/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({
htmlProps,
disableSpeakingIndicator,
@@ -222,8 +226,8 @@ export const ParticipantTile: (
)}