# Indicators

The React Chat SDK includes loading, empty-state, pagination, and typing indicators for channel, message, and thread surfaces.

## Best Practices

- Keep loading and empty states lightweight so they do not cause layout jumps.
- Reuse the SDK pagination primitives unless you need custom loading behavior.
- Treat the message-list typing indicator and header typing indicator as separate surfaces.
- Override shared indicators with `WithComponents` when you want consistent UI across nested SDK components.
- Audit custom indicator CSS against the current DOM before carrying older selectors forward.

## Available Components

- [`EmptyStateIndicator`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx)
- [`LoadingChannels`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingChannels.tsx)
- [`LoadingErrorIndicator`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingErrorIndicator.tsx)
- [`LoadingIndicator`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingIndicator.tsx)
- [`LoadMoreButton`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/LoadMore/LoadMoreButton.tsx)
- [`LoadMorePaginator`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/LoadMore/LoadMorePaginator.tsx)
- [`TypingIndicator`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TypingIndicator/TypingIndicator.tsx)
- [`TypingIndicatorHeader`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TypingIndicator/TypingIndicatorHeader.tsx)

## UI Customization

### EmptyStateIndicator

Use a local prop where the parent component still exposes one, or register a shared override with `WithComponents`.

Common surfaces:

- `ChannelList`
- `MessageList`
- `Thread`
- `ChatView.ThreadAdapter`

### LoadingErrorIndicator

Customize the loading error surface for `Channel` or other loading flows that expose it.

### LoadingIndicator

Customize generic loading states used while querying or paginating.

### LoadMorePaginator And LoadMoreButton

Use `Paginator` on `ChannelList` when you want infinite scroll or a different load-more experience. The current loading prop is `isLoading`.

### TypingIndicator

`TypingIndicator` is the message-list and thread-list typing surface. It renders avatar stacks plus animated dots and accepts the current scroll-related props:

- `scrollToBottom`
- `isMessageListScrolledToBottom`
- `threadList`

See the [Examples](#examples) section below for an override example.

### TypingIndicatorHeader

`TypingIndicatorHeader` is the inline header subtitle surface used by `ChannelHeader` and `ThreadHeader`. It is not a `ComponentContext` override. If you build a custom channel or thread header, render `TypingIndicatorHeader` yourself.

## EmptyStateIndicatorProps

| Prop       | Description                                   | Type                                 |
| ---------- | --------------------------------------------- | ------------------------------------ |
| `listType` | Type of list that will display the indicator. | `"channel" \| "message" \| "thread"` |

## LoadingErrorIndicatorProps

| Prop    | Description                             | Type    |
| ------- | --------------------------------------- | ------- |
| `error` | Error object rendered by the indicator. | `Error` |

## LoadingIndicatorProps

`LoadingIndicatorProps` is `ComponentProps<typeof IconLoading>` — the standard SVG element props. The indicator has no `color`/`size` props; it inherits its color from `currentColor` and is sized via CSS.

## LoadMoreButtonProps

| Prop        | Description                                         | Type                                         |
| ----------- | --------------------------------------------------- | -------------------------------------------- |
| `onClick`   | Callback used to load the next page.                | `React.MouseEventHandler<HTMLButtonElement>` |
| `isLoading` | Whether a loading request is currently in progress. | `boolean`                                    |

## LoadMorePaginatorProps

| Prop             | Description                                                                                                                                                                  | Type         |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| `hasNextPage`    | Whether another page is available.                                                                                                                                           | `boolean`    |
| `isLoading`      | Whether a loading request is currently in progress.                                                                                                                          | `boolean`    |
| `LoadMoreButton` | Custom button component for pagination. Defaults to [LoadMoreButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/LoadMore/LoadMoreButton.tsx). | `component`  |
| `loadNextPage`   | Callback used to load the next page.                                                                                                                                         | `() => void` |
| `reverse`        | Whether the load-more button should appear at the top instead of the bottom.                                                                                                 | `boolean`    |

## TypingIndicatorProps

| Prop                            | Description                                                                                         | Type         |
| ------------------------------- | --------------------------------------------------------------------------------------------------- | ------------ |
| `isMessageListScrolledToBottom` | Optional flag that suppresses the indicator when the list is scrolled away from the latest message. | `boolean`    |
| `scrollToBottom`                | Callback used by the default indicator to keep the list pinned to the latest message while typing.  | `() => void` |
| `threadList`                    | When `true`, the indicator filters typing state for the current thread instead of the channel.      | `boolean`    |

## Examples

### Override `TypingIndicator`

```tsx
import { Channel, MessageList, WithComponents } from "stream-chat-react";

const App = () => (
  <WithComponents overrides={{ TypingIndicator: CustomTypingIndicator }}>
    <Channel>
      <MessageList />
    </Channel>
  </WithComponents>
);
```

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/components/utility-components/indicators/](https://getstream.io/chat/docs/sdk/react/components/utility-components/indicators/).