Indicators

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

• EmptyStateIndicator - used in MessageList, VirtualizedList, and ChannelList components and is rendered when there are no items to display.

• LoadingChannels - a fancy loading placeholder for the ChannelList that looks like a nice outline of a few preview components.

• LoadingErrorIndicator - displays an error when the channel query fails in Channel.

• LoadingIndicator - 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 - a button for pagination when loading more items. Established via the LoadMorePaginator component and can be used standalone in a custom component.

• LoadMorePaginator - a paginator component that renders channels in the ChannelList.

• TypingIndicator - 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.

LoadingErrorIndicatorProps

error

The error object that is displayed.

LoadingIndicatorProps

color

Set the color of the loading icon.

size

The size of the loading icon.

LoadMoreButtonProps

onClick

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

refreshing

If true, the LoadingIndicator is displayed instead of button.

LoadMorePaginatorProps

loadNextPage

Callback to load the next page, required.

hasNextPage

Boolean for if there is a next page to load.

LoadMoreButton

A UI button component that handles pagination logic.

refreshing

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

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).

TypingIndicatorProps

Avatar

Custom UI component to display user's avatar.

threadList

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