diff --git a/.changeset/ninety-cheetahs-tickle.md b/.changeset/ninety-cheetahs-tickle.md new file mode 100644 index 000000000..d958b703c --- /dev/null +++ b/.changeset/ninety-cheetahs-tickle.md @@ -0,0 +1,5 @@ +--- +"@livekit/components-react": patch +--- + +Improve bar visualizer animations and add initializing state diff --git a/packages/react/src/components/participant/BarVisualizer.tsx b/packages/react/src/components/participant/BarVisualizer.tsx index 142cc2bf6..a4e002c88 100644 --- a/packages/react/src/components/participant/BarVisualizer.tsx +++ b/packages/react/src/components/participant/BarVisualizer.tsx @@ -30,7 +30,8 @@ export interface BarVisualizerProps extends React.HTMLProps { } const sequencerIntervals = new Map([ - ['connecting', 25 * 15], + ['connecting', 2000], + ['initializing', 2000], ['listening', 500], ['thinking', 150], ]); diff --git a/packages/react/src/components/participant/animationSequences/connectingSequence.ts b/packages/react/src/components/participant/animationSequences/connectingSequence.ts index a1fd0ec56..bea65b620 100644 --- a/packages/react/src/components/participant/animationSequences/connectingSequence.ts +++ b/packages/react/src/components/participant/animationSequences/connectingSequence.ts @@ -1,7 +1,7 @@ export const generateConnectingSequenceBar = (columns: number): number[][] => { const seq = []; - for (let x = 0; x <= columns; x++) { + for (let x = 0; x < columns; x++) { seq.push([x, columns - 1 - x]); }