Skip to content
weftGitHub

SyncIndicator

A quiet word beside the title: Saved, Saving or Offline.

SourcePackage @weft-js/warp

Preview

tsx
import { onCleanup, state } from '@weft-js/core'import { Row, Stack, SyncIndicator, Text, Textarea } from '@weft-js/warp'import type { SyncState } from '@weft-js/warp'export function Title() {  const sync = state<SyncState>('saved')  let timer: ReturnType<typeof setTimeout> | undefined  const edit = () => {    sync.value = 'saving'    clearTimeout(timer)    timer = setTimeout(() => (sync.value = 'saved'), 900)  }  onCleanup(() => clearTimeout(timer))  return (    <Stack gap="related">      <Row justify="between"><Text role="label">Rollback runbook</Text><SyncIndicator state={sync.value} /></Row>      <Textarea label="Notes" defaultValue="Roll back first, then read the logs." onInput={edit} />    </Stack>  )}

Installation

npm install @weft-js/warp

Usage

tsx
import { SyncIndicator } from '@weft-js/warp'

States

Use state to show saved, saving or offline.

tsx
import { state } from '@weft-js/core'import { SyncIndicator } from '@weft-js/warp'import type { SyncState } from '@weft-js/warp'export function States() {  return (    <>      {SYNC_STATES.map(s => <SyncIndicator key={s} state={s} />)}    </>  )}const SYNC_STATES: SyncState[] = ['saved', 'saving', 'offline']

Accessibility

  • This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.

API Reference

PropTypeDefaultDescription
stateSyncState—saved, saving or offline.

RelatedConflict alertConn banner