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 translations.messages.loaderText to change the default loading text, or loaderComponent to replace the default loading state while the agent generates a response.

If you’re using React InstantSearch 7.30.0 or earlier, use messagesLoaderComponent instead of loaderComponent.

Change the default loading text

Use translations.messages.loaderText to keep the default loader and change its text.

React

<Chat
  agentId="YOUR_AGENT_ID"
  translations={{
    messages: {
      loaderText: "Preparing an answer...",
    },
  }}
/>

Replace the loading state

Pass a React component to loaderComponent to replace the default loading state:

React

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

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

The component receives translations.loaderText as a prop.

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"
  loaderComponent={RotatingLoader}
/>

Keep the text short so the loading state stays readable.

For more information, see the Chat API reference.