# Indicators The Stream Chat React component library provides a variety components that show the status of items loading, queries from the API, network issues, and also a typing indicator: - [`ChatDown`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChatDown/ChatDown.tsx) - established in the `ChannelList`, the default indicator that shows when chat functionality isn't available, triggered when the Chat API is unavailable or your network isn't working. - [`EmptyStateIndicator`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx) - this component is established in the `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) - the default UI component that displays an error message 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 simple button component that handles pagination logic when loading more items after querying the API. 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) - a UI component that lists users currently typing and rendered via the `MessageList` and `VirtualizedList` components ## UI Customization ### ChatDown You can override this indicator by utilizing the `LoadingErrorIndicator` prop on `ChannelList`. ### 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 the `MessageList` and `VirtualizedList` components by using the `LoadingIndicator` prop on `Channel`. This injects the new value into the `ComponentContext` which is then pulled for use in the lists. ### LoadMorePaginator and LoadMoreButton Override this component in the `ChannelList` by using the `Paginator` prop on `ChannelList`. This is also the place where you can customize the `LoadMoreButton` by taking advantage of the prop of the same name on your new paginator component. ### TypingIndicator Override this component via the `TypingIndicator` prop on `Channel`, which injects the new value into the `ComponentContext` which is then pulled for use in the lists. ## ChatDownProps ### image The image url for this error or a ReactElement. | Type | | ---------------------------- | | string \| React.ReactElement | ### text The error message to show. | Type | | ------ | | string | ### type The type of error. | Type | | ------ | | string | ## 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\ | ### 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) | ### avatarSize The size in pixels of the avatar image. | Type | Default | | ------ | ------- | | number | 32px | ### threadList Boolean that signals whether the typing indicator is in a `Thread`. | Type | | ------- | | boolean | --- This page was last updated at 2026-06-09T08:45:36.372Z. For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v11/components/utility-components/indicators/](https://getstream.io/chat/docs/sdk/react/v11/components/utility-components/indicators/).