⚡️(frontend) code split livekit-client from the main chunk

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

@@ -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 {
+  const { analytics = {}, support = {}, custom_css_url = '' } = data ?? {}
-    analytics = {},
-    support = {},
-    silence_livekit_debug_logs = false,
-    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
 }

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 = () => {

src/frontend/src/utils/livekit.ts

@@ -1,14 +1,4 @@
-import {
+import { getBrowser, LocalParticipant, type Participant } from 'livekit-client'
-  getBrowser,
-  LocalParticipant,
-  LogLevel,
-  type Participant,
-  setLogLevel,
-} from 'livekit-client'
-
-export const silenceLiveKitLogs = (shouldSilenceLogs: boolean) => {
-  setLogLevel(shouldSilenceLogs ? LogLevel.silent : LogLevel.debug)
-}
 
 export function isFireFox(): boolean {
   return getBrowser()?.name === 'Firefox'