# Indicators

The Stream Chat React SDK provides components for loading, errors, pagination, and typing indicators:

- [`EmptyStateIndicator`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx) - used in `MessageList`, `VirtualizedList`, and `ChannelList`
  components and is rendered when there are no items to display.

- [`LoadingChannels`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingChannels.tsx) - a fancy loading placeholder for the `ChannelList` that looks like a nice outline of a few preview components.

- [`LoadingErrorIndicator`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingErrorIndicator.tsx) - displays an error when the channel query fails in `Channel`.

- [`LoadingIndicator`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingIndicator.tsx) - a simple loading spinner component. This component is used in various places in the SDK library when waiting for a response from the Stream Chat API. It can also
  be imported individually into a project for use in custom components.

- [`LoadMoreButton`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/LoadMore/LoadMoreButton.tsx) - a button for pagination when loading more items.
  Established via the `LoadMorePaginator` component and can be used standalone in a custom component.

- [`LoadMorePaginator`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/LoadMore/LoadMorePaginator.tsx) - a paginator component that renders channels in the `ChannelList`.

- [`TypingIndicator`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TypingIndicator/TypingIndicator.tsx) - lists users currently typing; rendered by `MessageList` and `VirtualizedList`

## Best Practices

- Keep loading and empty states lightweight to avoid layout shifts.
- Use consistent error messaging across Channel and MessageList indicators.
- Prefer `LoadMorePaginator` for standard pagination behavior.
- Limit typing indicator visibility in busy channels.
- Override indicator components only for UX or brand alignment.

## UI Customization

### EmptyStateIndicator

You can override this indicator in the `ChannelList` via the `EmptyStateIndicator` prop. Use the `EmptyStateIndicator` prop on `Channel` to override in the `MessageList` and `VirtualizedList` components.

### LoadingErrorIndicator

Override this component to display an error message in a way that fits your requirements via the `LoadingErrorIndicator` prop on `Channel`.

### LoadingIndicator

Override this component in `MessageList` and `VirtualizedList` using the `LoadingIndicator` prop on `Channel`. This injects the value into `ComponentContext` for list rendering.

### LoadMorePaginator and LoadMoreButton

Override this component in `ChannelList` using the `Paginator` prop. You can also customize `LoadMoreButton` on your custom paginator.

### TypingIndicator

Override this component via the `TypingIndicator` prop on `Channel`, which injects it into `ComponentContext` for list rendering.

## EmptyStateIndicatorProps

### listType

The type of list that will display this indicator, and this type will conditionally render a message.

| Type                               |
| ---------------------------------- |
| 'channel' \| 'message' \| 'thread' |

## LoadingErrorIndicatorProps

### error

The error object that is displayed.

| Type  |
| ----- |
| Error |

## LoadingIndicatorProps

### color

Set the color of the loading icon.

| Type   | Default |
| ------ | ------- |
| string | #006CFF |

### size

The size of the loading icon.

| Type   | Default |
| ------ | ------- |
| number | 15px    |

## LoadMoreButtonProps

### onClick

The onClick handler. Pagination logic should be executed in this handler.

| Type                                         |
| -------------------------------------------- |
| React.MouseEventHandler\<HTMLButtonElement\> |

### refreshing

If true, the `LoadingIndicator` is displayed instead of button.

| Type    |
| ------- |
| boolean |

## LoadMorePaginatorProps

### loadNextPage

Callback to load the next page, required.

| Type       |
| ---------- |
| () => void |

### hasNextPage

Boolean for if there is a next page to load.

| Type    |
| ------- |
| boolean |

### LoadMoreButton

A UI button component that handles pagination logic.

| Type      | Default                                                                                                                 |
| --------- | ----------------------------------------------------------------------------------------------------------------------- |
| component | [LoadMoreButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/LoadMore/LoadMoreButton.tsx) |

### refreshing

A boolean to indicate if there is currently any refreshing taking place.

| Type    |
| ------- |
| boolean |

### reverse

A boolean that indicates if the `LoadMoreButton` should be displayed at the top of the list of channels instead of the bottom of the list (the default).

| Type    |
| ------- |
| boolean |

## TypingIndicatorProps

### Avatar

Custom UI component to display user's avatar.

| Type      | Default                                                                                               |
| --------- | ----------------------------------------------------------------------------------------------------- |
| component | [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) |

### threadList

Boolean that signals whether the typing indicator is in a `Thread`.

| Type    |
| ------- |
| boolean |


---

This page was last updated at 2026-04-21T12:41:41.280Z.

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