Timeline states

TimelineLoading, TimelineEmptyState, and TimelineError are the initial feedback states used by Timeline.

Usage

Replace a state through the corresponding ActTimeline prop. The timeline continues to own the loading, empty, and error semantics.

import {
  ActTimeline,
  type TimelineEmptyStateProps,
} from '@hyperflow/chakra-ui'

function ProjectEmptyState({ message }: TimelineEmptyStateProps) {
  return <p>{message ?? 'No messages yet.'}</p>
}

export function SessionTimeline() {
  return <ActTimeline emptyStateComponent={ProjectEmptyState} />
}

Examples

Replace the initial error

The error component receives the original error. You can supply a product-specific message while retaining the state transition from Timeline.

import {
  ActTimeline,
  type TimelineErrorProps,
} from '@hyperflow/chakra-ui'

function ProjectTimelineError({ error }: TimelineErrorProps) {
  return <p>Conversation history is unavailable: {error.message}</p>
}

export function SessionTimeline() {
  return <ActTimeline errorComponent={ProjectTimelineError} />
}

Guide

Keep the states distinct

Loading means initial history is being obtained. Empty means no timeline entries are available. Error means the initial history request could not be completed.

Use the owning replacement point

Pass loadingComponent, emptyStateComponent, or errorComponent to ActTimeline. Do not render a second state independently inside an entry renderer.

Keep recovery outside the visual state

These components describe feedback only. Put retry or session-recovery behavior in the application layer that owns the route and runtime connection.

Props

TimelineLoading

TimelineEmptyState

TimelineError

Related components

• Timeline
• TimelineViewport
• TimelineEntryView