From a5d8aae2934b1c5ac34e21fd76d1e33108a8113e Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 22 Aug 2025 12:16:58 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F(frontend)=20optimize=20devic?=
 =?UTF-8?q?e=20icon=20hook=20to=20share=20icons=20between=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Optimize device icon hook calls to ensure parent select components and
their children share the same icon instances for better performance.
---
 .../livekit/components/controls/Device/SelectDevice.tsx   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/SelectDevice.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/SelectDevice.tsx
index c1486e4d..1e16a35f 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Device/SelectDevice.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/SelectDevice.tsx
@@ -21,18 +21,17 @@ type SelectDeviceProps = {
 }
 
 type SelectDevicePermissionsProps<T> = SelectDeviceProps &
-  Pick<SelectProps<T>, 'placement' | 'variant'>
+  Pick<SelectProps<T>, 'placement' | 'variant' | 'iconComponent'>
 
 const SelectDevicePermissions = <T extends string | number>({
   id,
   kind,
   onSubmit,
+  iconComponent,
   ...props
 }: SelectDevicePermissionsProps<T>) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
 
-  const deviceIcons = useDeviceIcons(kind)
-
   const { devices, activeDeviceId, setActiveMediaDevice } =
     useMediaDeviceSelect({ kind: kind, requestPermissions: true })
 
@@ -65,7 +64,7 @@ const SelectDevicePermissions = <T extends string | number>({
       label=""
       isDisabled={items.length === 0}
       items={items}
-      iconComponent={deviceIcons.select}
+      iconComponent={iconComponent}
       placeholder={items.length === 0 ? t('loading') : t('select')}
       selectedKey={id || activeDeviceId}
       onSelectionChange={(key) => {
@@ -114,6 +113,7 @@ export const SelectDevice = ({
       id={id}
       onSubmit={onSubmit}
       kind={kind}
+      iconComponent={deviceIcons.select}
       {...contextProps}
     />
   )