> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize the chat loading message

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

<Note>
  This is the **React InstantSearch v7** documentation.
  If you're upgrading from v6, see the [upgrade guide](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-v6-to-react-instantsearch-v7).
  If you were using React InstantSearch Hooks,
  this v7 documentation applies—just check for [necessary changes](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-hooks-to-react-instantsearch-v7).
  To continue using v6, you can find the [archived documentation](https://algolia.com/old-docs/deprecated/instantsearch/react/v6/api-reference/instantsearch/).
</Note>

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.

```jsx React icon=code theme={"system"}
<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:

```jsx React icon=code theme={"system"}
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.

```jsx React icon=code expandable theme={"system"}
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](/doc/api-reference/widgets/chat/react).