Skip to main content

    AiLoadingIndicator

    Use the AiLoadingIndicator component to indicate that AI-generated content is being loaded.

    OverviewProperties

    Import​

    import { AiLoadingIndicator } from '@dynatrace/strato-components-preview/content';

    Use cases​

    It's recommended to include the AiLoadingIndicator.Icon slot to show the default icon, which helps users identify AI-generated content.

    CodeSandbox

    Customize icon​

    By providing a custom icon in the AiLoadingIndicator.Icon slot, you can override the default icon.

    CodeSandbox

    Hide icon​

    You can hide the icon by not including the AiLoadingIndicator.Icon slot.

    CodeSandbox

    Accessibility​

    The AiLoadingIndicator component includes role="progressbar" to indicate an indeterminate loading state to assistive technologies. The icon is marked as decorative with aria-hidden="true".

    For optimal accessibility, wrap the component in a container with role="status" and aria-live="polite" to announce loading state changes to screen readers:

    <div role="status" aria-live="polite">
      {isLoading && <AiLoadingIndicator>Thinking…</AiLoadingIndicator>}
    </div>
    Still have questions?
    Find answers in the Dynatrace Community