Customize the chat loader

Change the loader text or replace the loader in the React InstantSearch chat widget.

This widget is and is subject to change in minor versions.

The <Chat> widget shows a loader while a chat turn is in progress. The default loader includes a spinner, optional text, and skeleton lines. Use translations.messages.loaderText to change the text or loaderComponent to replace the loader.

To change when and where the loader renders, see Control when and where the chat loader shows.

Change the loader text

The default loader doesn’t show any text. Add some with translations.messages.loaderText:

React

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

Change the text by turn phase

Pass a function to loaderText to change the text based on the turn context. Use phase to identify the current phase:

Phase	Meaning
submitted	The prompt was submitted but no assistant part has arrived yet.
tool	Running a tool call, such as a search.
reasoning	Reasoning before the answer starts, unless showReasoning is false.
thinking	Any other pause while the turn is in progress.

With reasoning shown, the loader stays hidden while a reasoning step streams, so the reasoning text only appears in the pause between a finished step and the start of the answer.

React

<Chat
  agentId="YOUR_AGENT_ID"
  translations={{
    messages: {
      loaderText: ({ phase }) => {
        switch (phase) {
          case "submitted":
            return "Reading your question...";
          case "tool":
            return "Working on your request...";
          case "reasoning":
            return "Working through the details...";
          default:
            return "Writing a response...";
        }
      },
    },
  }}
/>

The function receives the same turn context as shouldShowLoader, without defaultValue.

Replace the loader

Use the loaderComponent prop to render your own loading state. It receives:

• translations. The resolved loader translations.
• context. The same context as loaderText receives.
• inline. Whether the loader renders inside an assistant message. It’s true when loaderPosition is message-inline and an assistant message is available.

React

function Loader({ context }) {
  return (
    <p>
      {context.phase === "tool" ? "Searching..." : "Preparing an answer..."}
    </p>
  );
}

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

Use inline if your custom loader needs different markup or spacing when it appears inside a message.

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

Reuse the default loader

Instead of writing the markup yourself, render the built-in ChatMessageLoader and override what you need. It keeps the default spinner, skeleton lines, and animations. Pass the received props to ChatMessageLoader, then override translations, className, or any element attribute:

React

import { Chat, ChatMessageLoader } from "react-instantsearch";

function Loader(props) {
  return (
    <ChatMessageLoader
      {...props}
      className="my-Loader"
      translations={{ loaderText: "Preparing an answer..." }}
    />
  );
}

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

Rotate loading messages while the agent is working

Prefer phase, since it tracks the current phase of the turn. For long waits within one phase, rotate through a short set of messages:

React

import React from "react";

const LOADING_MESSAGES = [
  "Working on your request...",
  "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 each message short, and don’t describe work the agent isn’t doing.

Related

• Chat widget reference
• Control when and where the chat loader shows