From 995e6fa41d2699e37155ffd51463dd445809f1ef Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 26 May 2026 10:11:08 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F(frontend)=20code=20split=20l?=
 =?UTF-8?q?ivekit-client=20from=20the=20main=20chunk?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

livekit-client is a 400ko package that was wrongly bundled in the main
index.js chunk.

Every page was loading this enormeous vendor package only necessary
to join and participate to a room.

It made sense to set the LiveKit log level at app init, however the
performance tradeoff forces us to move it as close as possible to
where it is actually needed.
---
 src/frontend/src/components/AppInitialization.tsx | 10 +---------
 src/frontend/src/features/rooms/routes/Room.tsx   |  9 +++++++++
 src/frontend/src/utils/livekit.ts                 | 12 +-----------
 3 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/src/frontend/src/components/AppInitialization.tsx b/src/frontend/src/components/AppInitialization.tsx
index 0c5caeff..b59cb9b0 100644
--- a/src/frontend/src/components/AppInitialization.tsx
+++ b/src/frontend/src/components/AppInitialization.tsx
@@ -1,4 +1,3 @@
-import { silenceLiveKitLogs } from '@/utils/livekit'
 import { useConfig } from '@/api/useConfig'
 import { useAnalytics } from '@/features/analytics/hooks/useAnalytics'
 import { useSupport } from '@/features/support/hooks/useSupport'
@@ -9,12 +8,7 @@ export const AppInitialization = () => {
   const { data } = useConfig()
   useSyncUserPreferencesWithBackend()
 
-  const {
-    analytics = {},
-    support = {},
-    silence_livekit_debug_logs = false,
-    custom_css_url = '',
-  } = data ?? {}
+  const { analytics = {}, support = {}, custom_css_url = '' } = data ?? {}
 
   useAnalytics(analytics)
   useSupport(support)
@@ -29,7 +23,5 @@ export const AppInitialization = () => {
     }
   }, [custom_css_url])
 
-  silenceLiveKitLogs(silence_livekit_debug_logs)
-
   return null
 }
diff --git a/src/frontend/src/features/rooms/routes/Room.tsx b/src/frontend/src/features/rooms/routes/Room.tsx
index 1bc22d9e..39f34dfd 100644
--- a/src/frontend/src/features/rooms/routes/Room.tsx
+++ b/src/frontend/src/features/rooms/routes/Room.tsx
@@ -12,6 +12,8 @@ import {
   isRoomValid,
   normalizeRoomId,
 } from '@/features/rooms/utils/isRoomValid'
+import { useConfig } from '@/api/useConfig.ts'
+import { LogLevel, setLogLevel } from 'livekit-client'
 
 const BaseRoom = ({ children }: { children: ReactNode }) => {
   return (
@@ -32,6 +34,13 @@ const Room = () => {
   const mode = isLoggedIn && history.state?.create ? 'create' : 'join'
   const skipJoinScreen = isLoggedIn && mode === 'create'
 
+  const { data } = useConfig()
+
+  useEffect(() => {
+    const shouldSilenceLogs = data?.silence_livekit_debug_logs || false
+    setLogLevel(shouldSilenceLogs ? LogLevel.silent : LogLevel.debug)
+  }, [data?.silence_livekit_debug_logs])
+
   useKeyboardShortcuts()
 
   const clearRouterState = () => {
diff --git a/src/frontend/src/utils/livekit.ts b/src/frontend/src/utils/livekit.ts
index 08acb0dd..e728a619 100644
--- a/src/frontend/src/utils/livekit.ts
+++ b/src/frontend/src/utils/livekit.ts
@@ -1,14 +1,4 @@
-import {
-  getBrowser,
-  LocalParticipant,
-  LogLevel,
-  type Participant,
-  setLogLevel,
-} from 'livekit-client'
-
-export const silenceLiveKitLogs = (shouldSilenceLogs: boolean) => {
-  setLogLevel(shouldSilenceLogs ? LogLevel.silent : LogLevel.debug)
-}
+import { getBrowser, LocalParticipant, type Participant } from 'livekit-client'
 
 export function isFireFox(): boolean {
   return getBrowser()?.name === 'Firefox'