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 - 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 - this component is established in the 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 - the default UI component that displays an error message 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 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 - a paginator component that renders channels in the ChannelList.

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

text

The error message to show.

type

The type of error.

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.

avatarSize

The size in pixels of the avatar image.

threadList

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