Skip to main content

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. This component also displays the LoadingChannels indicator which is a fancy loading indicator for the ChannelList.

  • 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#

type#

The type of error.

Type
string

image#

The image url for this error.

Type
string

text#

The error message to show.

Type
string

EmptyStateIndicatorProps#

listType#

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

Type
'channel' | 'message'

LoadingErrorIndicatorProps#

error#

The error object that is displayed.

Type
Error

LoadingIndicatorProps#

color#

Set the color of the loading icon.

TypeDefault
string#006CFF

size#

The size of the loading icon.

TypeDefault
number15px

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#

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

TypeDefault
componentLoadMoreButton

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.

TypeDefault
componentAvatar

avatarSize#

The size in pixels of the avatar image.

TypeDefault
number32px

threadList#

Boolean for whether or not the typing indicator is in a Thread.

Type
boolean

Did you find this page helpful?