FCP optimization in chat

src/components/livekit-room.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { useRouter } from 'next/router'
+import { ExternalE2EEKeyProvider, Room, RoomOptions } from 'livekit-client'
+import { LiveKitRoom, useToken } from '@livekit/components-react'
+
+import { LiveKitChat } from '../components/livekit-chat'
+
+export default function LivekitRoom() {
+  const [isClient, setIsClient] = React.useState(false)
+  const router = useRouter()
+  const encryptedKey = router.asPath.split('#')[1]
+  const { roomName, username } = router.query as {
+    roomName: string
+    username: string
+  }
+
+  const token = useToken('/api/chat/livekit_token', roomName, {
+    userInfo: {
+      identity: username,
+      name: username
+    }
+  })
+
+  const roomOptions = React.useMemo((): RoomOptions => {
+    if (!encryptedKey) return {}
+    const worker = isClient
+      ? new Worker(new URL('livekit-client/e2ee-worker', import.meta.url))
+      : undefined
+    const keyProvider = new ExternalE2EEKeyProvider()
+    keyProvider.setKey(encryptedKey)
+
+    if (!worker) return {}
+    return {
+      e2ee: {
+        keyProvider,
+        worker
+      }
+    }
+  }, [encryptedKey, isClient])
+
+  const room = React.useMemo(() => new Room(roomOptions), [roomOptions])
+
+  React.useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  if (token === '') {
+    return <div>Getting token...</div>
+  }
+
+  return (
+    <>
+      {token && (
+        <LiveKitRoom
+          room={room}
+          serverUrl={process.env.NEXT_PUBLIC_LIVEKIT_URL}
+          token={token}
+          connectOptions={{ autoSubscribe: true }}
+          connect={true}
+          audio={false}
+          video={false}
+        >
+          <LiveKitChat />
+        </LiveKitRoom>
+      )}
+    </>
+  )
+}

src/components/new-chat-dialog.tsx

@@ -17,7 +17,7 @@ import { generateRoomId, uint8ArrayToBase64UrlSafe } from '../shared/utils'
 import RandomGenerator from '../shared/random-generator'
 import Keychain from '../shared/keychain'
 
-export const NewChatDialog = ({ open, onClose }: { open: boolean, onClose: () => void }) => {
+export default function NewChatDialog ({ open, onClose }: { open: boolean, onClose: () => void }) {
   const router = useRouter()
   const { roomName } = router.query as { roomName: string | undefined }
   const form = useForm<{

src/pages/chats/[roomName].tsx

@@ -1,82 +1,39 @@
 import React from 'react'
 import dynamic from 'next/dynamic'
-import { ExternalE2EEKeyProvider, Room, RoomOptions } from 'livekit-client'
-import { LiveKitRoom, useToken } from '@livekit/components-react'
 import MainLayout from '../../layouts/main'
-
+import LivekitRoom from '../../components/livekit-room'
 import { useRouter } from 'next/router'
-import { LiveKitChat } from '../../components/livekit-chat'
-import { NewChatDialog } from '../../components/new-chat-dialog'
-const HomeContent = dynamic(() => import('../../components/home-content'), { ssr: true })
-
+const HomeContent = dynamic(() => import('../../components/home-content'), {
+  ssr: true
+})
+const NewChatDialog = dynamic(
+  () => import('../../components/new-chat-dialog'),
+  { ssr: true }
+)
 
 export default function ChatPage() {
-  const [isClient, setIsClient] = React.useState(false)
   const router = useRouter()
-  const encryptedKey = router.asPath.split('#')[1]
-  const { roomName, username } = router.query as {
-    roomName: string
+  const { username } = router.query as {
     username: string
   }
-
-  const token = useToken('/api/chat/livekit_token', roomName, {
-    userInfo: {
-      identity: username,
-      name: username
-    }
-  })
-
-  const roomOptions = React.useMemo((): RoomOptions => {
-    if (!encryptedKey) return {}
-    const worker = isClient
-      ? new Worker(new URL('livekit-client/e2ee-worker', import.meta.url))
-      : undefined
-    const keyProvider = new ExternalE2EEKeyProvider()
-    keyProvider.setKey(encryptedKey)
-
-    if (!worker) return {}
-    return {
-      e2ee: {
-        keyProvider,
-        worker
-      }
-    }
-  }, [encryptedKey, isClient])
-
-  const room = React.useMemo(() => new Room(roomOptions), [roomOptions])
+  const [isClient, setIsClient] = React.useState(false)
 
   React.useEffect(() => {
     setIsClient(true)
   }, [])
 
-  if (token === '') {
-    return <div>Getting token...</div>
-  }
-
   return (
     <>
       <MainLayout>
         <HomeContent>
-          {token && (
-            <LiveKitRoom
-              room={room}
-              serverUrl={process.env.NEXT_PUBLIC_LIVEKIT_URL}
-              token={token}
-              connectOptions={{ autoSubscribe: true }}
-              connect={true}
-              audio={false}
-              video={false}
-            >
-              <LiveKitChat />
-            </LiveKitRoom>
-          )}
+          <LivekitRoom />
         </HomeContent>
-        {isClient && (
+        {isClient ? (
           <NewChatDialog
             open={!username}
             onClose={() => router.push('/', undefined, { shallow: true })}
           />
-        )}
+        ) : null}
       </MainLayout>
     </>
   )