Skip to content

Indicators

The React Chat SDK includes loading, empty-state, pagination, and typing indicators for channel, message, and thread surfaces.

Best Practices

  • Keep loading and empty states lightweight so they do not cause layout jumps.
  • Reuse the SDK pagination primitives unless you need custom loading behavior.
  • Treat the message-list typing indicator and header typing indicator as separate surfaces.
  • Override shared indicators with WithComponents when you want consistent UI across nested SDK components.
  • Audit custom indicator CSS against the current DOM before carrying older selectors forward.

Available Components

UI Customization

EmptyStateIndicator

Use a local prop where the parent component still exposes one, or register a shared override with WithComponents.

Common surfaces:

  • ChannelList
  • MessageList
  • Thread
  • ChatView.ThreadAdapter

LoadingErrorIndicator

Customize the loading error surface for Channel or other loading flows that expose it.

LoadingIndicator

Customize generic loading states used while querying or paginating.

LoadMorePaginator And LoadMoreButton

Use Paginator on ChannelList when you want infinite scroll or a different load-more experience. The current loading prop is isLoading.

TypingIndicator

TypingIndicator is the message-list and thread-list typing surface. It renders avatar stacks plus animated dots and accepts the current scroll-related props:

  • scrollToBottom
  • isMessageListScrolledToBottom
  • threadList

See the Examples section below for an override example.

TypingIndicatorHeader

TypingIndicatorHeader is the inline header subtitle surface used by ChannelHeader and ThreadHeader. It is not a ComponentContext override. If you build a custom channel or thread header, render TypingIndicatorHeader yourself.

EmptyStateIndicatorProps

Prop Description Type
listType Type of list that will display the indicator. "channel" | "message" | "thread"

LoadingErrorIndicatorProps

Prop Description Type
error Error object rendered by the indicator. Error

LoadingIndicatorProps

LoadingIndicatorProps is ComponentProps<typeof IconLoading> — the standard SVG element props. The indicator has no color/size props; it inherits its color from currentColor and is sized via CSS.

LoadMoreButtonProps

Prop Description Type
onClick Callback used to load the next page. React.MouseEventHandler<HTMLButtonElement>
isLoading Whether a loading request is currently in progress. boolean

LoadMorePaginatorProps

Prop Description Type
hasNextPage Whether another page is available. boolean
isLoading Whether a loading request is currently in progress. boolean
LoadMoreButton Custom button component for pagination. Defaults to LoadMoreButton. component
loadNextPage Callback used to load the next page. () => void
reverse Whether the load-more button should appear at the top instead of the bottom. boolean

TypingIndicatorProps

Prop Description Type
isMessageListScrolledToBottom Optional flag that suppresses the indicator when the list is scrolled away from the latest message. boolean
scrollToBottom Callback used by the default indicator to keep the list pinned to the latest message while typing. () => void
threadList When true, the indicator filters typing state for the current thread instead of the channel. boolean

Examples

Override TypingIndicator

import { Channel, MessageList, WithComponents } from "stream-chat-react";

const App = () => (
  <WithComponents overrides={{ TypingIndicator: CustomTypingIndicator }}>
    <Channel>
      <MessageList />
    </Channel>
  </WithComponents>
);