Customize the chat loading message

Replace the default loading state in the React InstantSearch chat widget.

This is the React InstantSearch v7 documentation. If you’re upgrading from v6, see the upgrade guide. If you were using React InstantSearch Hooks, this v7 documentation applies—just check for necessary changes. To continue using v6, you can find the archived documentation.

Use messagesLoaderComponent to replace the default loading state while the agent generates a response.

Replace the loading state

Pass a React component to messagesLoaderComponent to customize the loading state:

React

function Loader() {
  return <p>Preparing an answer…</p>;
}

<Chat
  agentId="YOUR_AGENT_ID"
  messagesLoaderComponent={Loader}
/>

The component receives no props.

Rotate loading messages while the agent is working

To make the loading state more informative, rotate through a short set of helper messages.

React

import React from "react";

const LOADING_MESSAGES = [
  "Checking your catalog…",
  "Reviewing the results…",
  "Writing a response…",
];

function RotatingLoader() {
  const [messageIndex, setMessageIndex] = React.useState(0);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setMessageIndex((index) => (index + 1) % LOADING_MESSAGES.length);
    }, 2500);

    return () => clearInterval(timer);
  }, []);

  return <p>{LOADING_MESSAGES[messageIndex]}</p>;
}

<Chat
  agentId="YOUR_AGENT_ID"
  messagesLoaderComponent={RotatingLoader}
/>

Keep the text short so the loading state is easy to read.

For more information, see the Chat API reference.