Realtime Components

Overview

Katalyst provides components for displaying realtime data and connection status:

• ConnectionStatus — Shows live/disconnected indicator
• LiveCounter — Animated counter for realtime metrics

---

ConnectionStatus

Purpose

Displays the current realtime connection status with a pulsing indicator.

Basic usage

import { ConnectionStatus } from '@/shared/ui/components/realtime'

export function Header() {
  const { isConnected, mode } = useRealtimeConnection()

  return (
    <header>
      <ConnectionStatus
        isConnected={isConnected}
        mode={mode}
        showLabel
      />
    </header>
  )
}

Props

Prop	Type	Default	Description
isConnected	boolean	Required	Connection state
mode	'websocket' | 'polling'	'websocket'	Connection mode
showMode	boolean	true	Show WS/Poll indicator
showLabel	boolean	true	Show text label
labels	{ connected?, connecting?, disconnected? }	Default labels	Custom labels
size	'sm' | 'md' | 'lg'	'md'	Size variant
className	string	-	Additional class

Visual states

• Connected: Green pulsing dot with "Live" label
• Connecting/Disconnected: Yellow static dot with status label

---

LiveCounter

Purpose

Displays an animated counter that smoothly transitions between values, ideal for realtime metrics.

Basic usage

import { LiveCounter } from '@/shared/ui/components/realtime'

export function ActiveUsersWidget() {
  const { current, previous, trend } = useActiveUsers()

  return (
    <LiveCounter
      value={current}
      previousValue={previous}
      trend={trend}
      suffix=" users"
    />
  )
}

Props

Prop	Type	Default	Description
value	number | null	Required	Current value
previousValue	number | null	-	Start value for animation
trend	'up' | 'down' | 'stable'	'stable'	Trend direction
duration	number	1	Animation duration (seconds)
decimals	number	0	Decimal places
prefix	string	''	Text before number
suffix	string	''	Text after number
separator	string	','	Thousands separator
size	'sm' | 'md' | 'lg' | 'xl'	'lg'	Size variant
showTrend	boolean	true	Show trend indicator
trendColors	{ up?, down?, stable? }	Default colors	Custom trend colors
className	string	-	Additional class

Example with formatting

<LiveCounter
  value={1234567}
  prefix="$"
  decimals={2}
  separator=","
  trend="up"
  size="xl"
/>
// Displays: $1,234,567.00 with up arrow

---

Usage with realtime data

These components are designed to work with Katalyst's realtime infrastructure:

import { useRealtimeMetric } from '@/shared/infrastructure/realtime'
import { ConnectionStatus, LiveCounter } from '@/shared/ui/components/realtime'

export function RealtimeDashboard() {
  const { value, previousValue, trend, isConnected, mode } = useRealtimeMetric('activeUsers')

  return (
    <div>
      <ConnectionStatus isConnected={isConnected} mode={mode} />
      <LiveCounter
        value={value}
        previousValue={previousValue}
        trend={trend}
      />
    </div>
  )
}

Notes

• LiveCounter uses react-countup for smooth animations
• ConnectionStatus uses CSS animations for the pulsing effect
• Both components support dark mode through Tailwind classes