Custom Loading Indicator

This example demonstrates how to replace the default bouncing dots loading indicator with a custom animated SVG.

How it works

The loadingIndicator.render config option lets you provide a custom function that returns an HTMLElement. The function receives a context with the location ('standalone' or 'inline') so you can use different indicators in different places.

Animation Preservation

Add data-preserve-animation="true" to your custom element to prevent the DOM morpher from interrupting CSS animations during updates.

// Custom loading indicator configuration
loadingIndicator: {
  // Hide bubble background/border for cleaner custom indicators
  showBubble: false,
  render: ({ location, defaultRenderer }) => {
    if (location === 'standalone') {
      // Custom animated SVG for standalone
      return createRuntypeLoader();
    }
    // Default dots for inline
    return defaultRenderer();
  }
}
      

Location Types

standalone: Shown in its own bubble while waiting for the stream to start.
inline: Shown inside the assistant message bubble when content is empty.

Bubble Visibility

Set showBubble: false to hide the background, border, and shadow from the standalone indicator wrapper. This lets custom animated icons render without the default bubble styling.

Show Bubble

Bubble: hidden (showBubble: false)

Idle State Indicator

Show a custom indicator when the assistant is waiting for the next user message. Use loadingIndicator.renderIdle to customize what appears after a response completes.

Show Idle Indicator

Idle indicator: disabled

Other Options

Return null to hide the indicator entirely. You can also use a plugin's renderLoadingIndicator or renderIdleIndicator hooks for the same functionality.