To help you detect when your avatar has connected to a LiveKit room in React and stop that loading state, you can use the

useVoiceAssistant

hook from

@livekit/components-react

. This hook gives you the

state

property, which tells you about your avatar's current status. Your avatar is connected and ready when the state changes from

"connecting"

to any of

"listening"

,

"thinking"

, or

"speaking"

. Here’s a simple example for you:

import { useVoiceAssistant } from '@livekit/components-react';

const { state: agentState } = useVoiceAssistant();

const isLoading = agentState === "connecting";

{isLoading ? <div>Loading...</div> : <avatarcomponent/>}

If you’re not using a voice assistant agent but still want to know when the local participant has connected to the room, you can try the

useConnectionState

hook instead:

import { useConnectionState } from '@livekit/components-react';
import { ConnectionState } from 'livekit-client';

const connectionState = useConnectionState();
const isLoading = connectionState === ConnectionState.Connecting;

{isLoading ? <div>Loading...</div> : <roomcontent/>}

Please feel free to reach out if you’d like more help or if you’re working on a custom avatar integration beyond the usual setup. I’m here to support you! Sources: complex-agents/teleprompter/teleprompter-frontend/components/playground.tsx | livekit-rtc/jupyter-html/src/App.tsx